I have an image element, it can contain any aspect ratio of the image (eg horizontal and vertical). I want to fill the page with it until either its height or width is 100% of the page.
I tried checking the image height and width and setting min-width/height to 100%. This worked very well for vertical images, but with horizontal images, sometimes the 100% height gets reached before the width does, (especially on 4:3 aspect ratio images).
Basically, I just want it to fill either the height or width of the screen, depending on what happens first.
Try with object-fit on image, so it fits it's container and chose the value that suits your needs best.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
The object-fit property will do this if you set it to contain (if you set it to fill it will become distorted if the aspect ratio of the container and the img are not the same).
Here's a simple example, change the viewport dimensions to see the affect on the image:
.container {
width: 50vw;
height: 50vh;
background: gray;
}
.container img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="container">
<img src="https://picsum.photos/id/1015/768/1024"/>
</div>
Related
I am trying to insert full width hero image. Problem is based on the original height of the image, it's getting too short on mobile device.
Large Screen:
Mobile Screen:
Basically, I wanted little bit bigger height than the calculated height on mobile screen. So, I thought it would be good if I apply a min-height to the image.
So, I have added this:
img {
min-height: 300px;
}
Surely, it's not the way.
How to fix this?
Code Demo
You need to wrap the img block in the parent block. Then in the parent block to set the minimum height, and in the img block to specify width of 100%. This will preserve the aspect ratio of the image, and its height will be either greater or as the parent, but not less than that set in the parent block. Of course, the parent block must inherit the entire screen width from its parent block or explicitly have a width of 100%. For example:
.block__image {
/*width: 100%;*/
min-height: 300px;
}
.block__image img {
width: 100%;
}
<div class="block__image">
<img src="https://i.stack.imgur.com/U1tXC.jpg" alt="image error">
</div>
I can't seem to determine what height:auto; is doing here.
img {
max-width: 100%;
display: block;
height: auto;
}
This code is from the following link: https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/make-an-image-responsive
height: auto; is used for letting browser adjust the height of the image with respect to aspect ratio of image.
As stated by the article: "The height property of auto keeps the original aspect ratio of the image."
The image will keep the width and height ratio of the original image, resizing for the container.
For example:
The image is 500px width x 250px height
The aspect ratio is 2 (500/250)
The container has max-width 200px
You will obtain an image with width 200px and height 100px
Also note that if the original image is smaller than the container, it will not fit it completely and just display the orginal image.
How can I make an image fit a whole div (resizing the image if necessary)?
yes, You can use
width: auto;
height: 400px;
object-fit: cover;
Instead of cover you can use contain, fill, etc as per your choice.
You cannot always display with the same dimensions
Because your container may be other sizes
But the normal way is to set the height to 100% and hide it overflow
Or vice versa
width: 100%
or use object-fit: hover
same as:
img {
width:100%;
height:100%;
object-fit:cover;
}
If you provide the height OR width of DIV in %, then the div will be expanded as per the size of the image but if you provide the width and height of the div in pixle "px" then the div will have fixed height and width.
I was using "object-fit: contain" to scale an Image when I realised that it doesn't work in Internet Explorer / Edge. So I switched to "max-width: 100%;max-height: 100%;" and I was wondering where the difference is?
Maybe this is a stupid question, but I am a little confused.
max-width and max-height property stop your image to go outside of container If you apply both property max-width:100% and max-height:100% then image will show in without stretching and within the container.
object-fit:contain :-
With object-fit contain you have to define your image height width otherwise it will go outside of container.
Using the object-fit property, you can fit the contents of an image into the dimensions you specify in your style sheet.
The contain value tells the image to shrink or enlarge itself until it fits in the box while maintaining its aspect-ratio.
.first-item {
height: 200px;
width: 200px;
margin-bottom: 10px;
}
.second-item {
height: 200px;
width: 200px;
margin-bottom: 10px;
}
.first-item img {
max-height: 100%;
max-width: 100%;
}
.second-item img {
object-fit: contain;
}
<div class="first-item">
<img src="http://perform-ers.com/images/channel/logo/8f4beb43c0b80dd46228cb87364f4196.jpg" class="grid-img">
</div>
<div class="second-item">
<img src="http://perform-ers.com/images/channel/logo/8f4beb43c0b80dd46228cb87364f4196.jpg" class="grid-img">
</div>
It behaves similarly as background images:
contain should fit the image into the container so that the whole image will be visible and that it keeps its original proportion between width and height. Depending on the proportions of the container this can result in 100% width or 100% height, with the other parameter being set to auto.
width: 100%; height: 100% will in most cases distort the image: It will show the whole image (without cutting off anything), but it will stretch both parameters independently. Think of a 200x200px image that is put into a 400x600 container: The width will be strechted to twice the original, while the height will be stretched to three times the orignal height - this will result in an ugly distortion.
If object-fit: contain is applied to the same example (instead of width: 100%; height: 100%), the new img width will be 400px (= doubled), and the height will also be 400px, since the proportion is kept, resulting in some empty space, but also in a not distorted image.
Its not working because it's not supported by IE / Edge.
http://caniuse.com/#feat=object-fit
As far as layout is concerned:
If the element has a locked aspect ratio, "max-width: 100%;max-height: 100%" will behave like object-fit: scale-down
object-fit: contain guarantees that one of the dimensions of the object will match its container. In some cases, this will look like you had written just "width: 100%" and in others just "height: 100%" depending on the relative aspect ratios of the object and container.
Also...
object-fit is specifically for replaced elements and won't work on most html elements. It does not size an HTML element but an internal object. The image of an <img> will be resized but not the <img> itself
Basically, I've got a div with width set to 100%, within which there is an img link. The img's width is set to auto with a height of 600px. The link area stretches over the width of the whole div, in this case the width of the whole page, rather than just the img.
<div class="feature">
<img src="feature.jpg" />
</div>
.feature {
width: 100%;
height: auto;
}
.feature a img {
width: auto;
height: 600px;
display: block;
margin: auto;
}
I don't want to change the div's width to a set value (which does work), because I want to be able to add images later on that may have different aspect ratios. Does anyone have a solution? thanks.
This shows the result if you set the width of the div manually: http://jsfiddle.net/L1xanprh/4/ I also tried just setting the div width to auto as well, it game the same problem as the width being 100%.
For that a, make it's display inline-table
avoid using width:auto.
give the exact position of the image where you want to appear the image.
and use exact width and the height of the original image.
if not your image will get stretched.
If not use the width and height values with accept ratio is equal with the accept ratio of the original image.
Then your image will not get stretched. But if your using a image with lower pixel rate your image will
blurred when your using higher width,height values than the original image.