Hi I have a fluid container that is based on screen height and width in my website. I would like to have an image fill the container at all times as it expands in any direction based on screen size. The images used will vary in size and aspect ratio.
I have made an attempt with html and css below:
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background-color: red;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
/* max-width: 100%; // If used Image needs to be tall enough to fill div */
/* max-height: 100%; // If used Image needs to be wide enough to fill div */
}
<div>
<img src="http://i.imgur.com/kOY2G57.jpg">
</div>
Without max-height and max-width, this works well if the img is smaller than the container but does not work if the images come out larger as they come out in their natural size and get cropped.
jsfiddle example
Is it possible to accomplish this task with just pure css?
Update
I also would like to avoid using background images as a solution and see if this is possible with just the img tag in place at the dom so as to avoid programing the img tags if possible.
Instead of using the <img> tag you can just give the <div> a background image with background-size: cover property. The background image will maintain the aspect ratio while covering the entire div container at all times.
<div></div>
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background: red url("http://i.imgur.com/kOY2G57.jpg") center center;
background-size: cover;
position: relative;
overflow: hidden;
}
Use object-fit for images to achieve the same result akin to background-size cover, contain:
.imgFit {
object-fit: cover; /* cover, contain */
display: block;
width: 100%;
height: 100%;
}
Use like:
<img class="imgFit" src="" alt="">
Related
I am trying to make a showcase section for a web page. It consists of a div with a (responsive) background image and a header that would be centered horizontally and vertically over this image. I've managed to get the image in and have it be responsive, and I've got the header centered, but my problem arises when the window size becomes smaller.
I'm using position: absolute, the top property, and transform to have it be centered, but the top property only works when height is specified in the parent container. However, when the window shrinks to the point where the image begins to shrink to below its original height, the text does not stay vertically centered, only horizontally (since I'm going off of the original height for top (800px)).
I can't just change the height with a media query since the image size is changing constantly and I can't not use height because then the top property would not work at all, so I'm a bit confused with how to get around this.
Here are the relevant sections of my code:
HTML:
<section class="showcase">
<div class="showcase-container">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
CSS:
.container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: auto;
}
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: 800px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I might just guess because I don't know how does this really look, but I assumed few things and in a result instead of background image I would just use normal image, make it blocky and display div over it, you will have height preserved in any size, take a look:
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
}
.showcase-container img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
padding: 10px 20px;
}
<section class="showcase">
<div class="showcase-container">
<img src="https://source.unsplash.com/random/1200x700" alt="">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
See MDN's <figcaption> documentation.
<figure>
<img src="/media/examples/hamster.jpg" alt="a cute hamster" />
<figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>
If I'm understanding this right, you're saying you don't need to worry about the image always maintaining an 800px height, you just want the h1 to remain centered. In that case, it's really simple.
Just add your image as a background, setting the background-size to cover, then make sure the container is never larger than the window by setting its height to 100vh, but never taller than 800px by setting its max-height.
.showcase-container {
/* your styles here */
background-image: url('yourimage.jpg');
background-size: cover;
height: 100vh;
max-height: 800px;
}
OR if you need it to be vertically centered in the window independently of the container, you can always change top: 50%; to top: 50vh; and position relative to the body.
I want to center an full screen image vertically.
I can't define image in CSS because the image depends on URL parameters.
<div>
<img src="photo.jpg">
</div>
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If I define my image CSS like this:
div img {
width: 100%;
height: 100%;
}
My image will stretch and be deformed in height to fit on screen.
If I define my image CSS like this (just without defining height):
div img {
width: 100%;
}
My image will not stretch/be deformed, but it will start at top: 0 of the image. What I want is the image to be centered vertically and the overflow of it's height to be hidden.
Basically I want the same behaviour I would get in CSS with background centered:
background: url(photo.jpg) no-repeat center;
background-size: cover;
EDIT: I forgot to mention that CSS object-fit: cover works on this but I'm looking for a more cross-browser solution since this property does not work in every browsers.
Try this css
div {
position: fixed;
top: 50%;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
EDIT
also its a bad practice to give the image both height and width. this will always override the aspect ratio of the image and stretch it in some direction.
use this for img
div img {
width: 100%;
}
This will first position the division 50% form top. i.e. the image will now have its topmost part at 50% of the page height then the translate property will move the image upward by 50% of its height essentially centering the image
How about this:
div {
position:fixed;
top:0;
left:0;
width: 100px;
height: 100px;
border:1px solid red;
text-align:center;
line-height:100px;
overflow:hidden;
}
img {
vertical-align:middle;
border:1px solid black;
}
<div>
<img src="https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif">
</div>
If you allow js, you can do this (assuming the image has id 'img'):
#img {
width: 100%;
position: absolute;
top: 50%;
}
A negative margin top needs to be set using js or jQuery (on resize):
$('#img').css('margin-top', '-'+($('#img').height()/2)+'px');
In my liquid layout, my div elements have the property position-fixed. This means that as I re-size the browser, all the elements remain in the same position but have shrunk or increased in size.
The problem is when I place a picture in one of my div elements, it does not scale to fit in my div element, therefore the image 'leaks' out of its div container.
What I need: a property on my div element and/or image so that the image stays the same size as the div container and when the page is re-sized, the image re-sizes as well. Here's what I have:
#div1 {
position: fixed;
background-color: blue;
width: 100%;
height: 10%;
opacity: .3;
}
#div2 {
background-color: green;
position: fixed;
opacity: .3;
left: 20%;
right: 20%;
top: 10%;
height: 40%;
width: 60%;
}
#div3 {
background-color: red;
opacity: .3;
position: fixed;
left: 20%;
right: 20%;
top: 50%;
height: 40%;
width: 60%;
}
#div4 {
background-color: tan;
opacity: .3;
position: fixed;
height: 80%;
right: 80%;
width: 20%;
top: 10%;
}
#div5 {
background-color: black;
opacity: .3;
position: fixed;
height: 80%;
width: 20%;
left: 80%;
top: 10%;
}
#div6 {
background-color: purple;
opacity: .3;
position: fixed;
top: 90%;
width: 100%;
height: 10%;
}
img {}
<div id="div1">
<p>div1</p>
</div>
<div id="div2">
<figure>
<img class="pictures" src="assets/me.jpg" />
<figcaption>
This is a picture.
</figcaption>
</figure>
</div>
<div id="div3">
<header>
<h1>Introducing Me</h1>
</header>
<p>div3</p>
<p>Hello eveyrone i am adan ramirez</p>
</div>
<div id="div4">
<p>div4</p>
</div>
<div id="div5">
<p>div5</p>
</div>
<div id="div6">
<p>div6</p>
</div>
make image background-image: url(..img);
and apply background-size: cover; on the same div.
The key here is cover property value as it tells browser to resize image while keeping aspect ratio to fit all sides.
#Sphinxxx suggested to use background-size: contain; which solved OP problem;`
Try this:
img {
height: 100%;
width: 100%;
object-fit: contain;
}
object-fit is a pretty cool CSS3 property.
Used with the contain value the image will increase or decrease in size within its container while maintaining its aspect-ratio.
Here's how CSS-Tricks describes it:
The object-fit property defines how an element responds to the height
and width of its content box. It's intended for images, videos and
other embeddable media formats in conjunction with the object-position
property. Used by itself, object-fit lets us crop an inline image by
giving us fine-grained control over how it squishes and stretches
inside its box.
Because browser support for this property is still somewhat weak, here's a polyfill that covers all major browsers including IE9: Polyfill for CSS object-fit property
For a deeper look here are a few references:
W3C CSS Image Values and Replaced Content Module Level 3
MDN object-fit
CSS-Tricks `object-fit
Have you tried :
img {
width: 100%;
}
Try:
img {
max-width: 100%;
max-height: 100%;
}
figure {
height: 100%;
width: 100%;
margin: 0;
}
figure is the parent element, so you need to set it's height/width as well. Also, the default styling on figure includes a margin, so you need to remove that to keep the image inside of the parent div. Also, you may need to make the max-height smaller to account for the caption if you want to keep that inside of the parent div.
You can also use width and height instead of max-* if you want the image to always fill the parent regardless of its native size.
I have a div which contains an image
<div class="logo-wrapper">
<img src="img/logo.jpg">
</div>
and following CSS:
.logo-wrapper {
width: 197px;
height: 78px;
position: relative;
}
img {
bottom: 0;
display: block;
height: 100%; /* this */
width: 100%; /* or this, depending on image ratio */
margin: auto;
position: absolute;
top: 0
}
The image inside .logo-wrapper is generated dynamically and each has a different ratio. What I intend to do, is to fill the img whether in the height or width of its parent depending on the dimensions of the image. I could do that with an background image instead, but I don't want to have trouble with old IE's. So does anyone have a solution that the img takes whether height or width, depending on its ratio?
If the image is bigger than .logo-wrapper, you can use
img {
max-height: 100%;
max-width: 100%;
}
If not, it won't grow, but this way you won't have a blurred image.
http://jsfiddle.net/6rwUC/3/
As you can see on the jsfiddle link, I'm trying to create one layout for image previews. I would like to have resized images keeping original ratio, just cut off what overlays the parent div. How can I do this ?
.image-column {
background: #cecece;
width: 100%;
height: 180px;
overflow: hidden;}
.image-column a img {
position:relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;}
If CSS3 is an option, you could use transform with a negative translate of -50% horizontally and vertically, while the element is positioned with left: 50% and top: 50% as follows:
.image-column a img {
position:relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
WORKING DEMO.
Update
According to your update:
I would like to have resized images keeping original ratio, just cut
off what overlays the parent div.
The only pure CSS solution is using the images as background-image for the <a> elements, while you're using background-size: cover;:
<div class="image-column">
</div>
.image-column a {
display: block;
height: 100%;
background: url(http://domain.com/path/to/image.jpg) 50% 50% no-repeat;
background-size: cover;
}
However, if the height/width ratio of the box is lower than the image, you can use the old answer including max-width: 100%; for the image: Online Demo.
And if the height/width ratio of the box is higher than the image, you need to use max-height: 100% for the image: Online Demo.
For dynamic calculation, you'll need to use JavaScript. Here is a similar topic on SO.
Try this out: http://jsfiddle.net/6rwUC/4/
I've simply added max-width: 100%;