Reputation: 485
I have an img inside a div tag, and currently I am using the CSS
img {
max-height: 100%;
max-width: 100%;
}
This currently keeps the images fitting inside the div, which is what I wanted. However, if the image file is smaller than the div, the image will not be the maximum size it can be. Is there an easy way to maximise the image, while keeping the image inside the div, and keeping the original aspect ratio?
I've tried setting the height to 100%, with a max-width of 100%, but this distorts the image, which is not what I'm looking for.
I also tried object-fit: contain;
, but this doesn't seem to do anything.
Thanks :)
Upvotes: 2
Views: 10465
Reputation: 106
If you want to keep the image as an HTML element and not a CSS background, I would use object-fit. There are browser support limitations with this CSS property.
https://caniuse.com/#search=object-fit
You could use a polyfill to combat this. Such as: https://github.com/fregante/object-fit-images
An example of what I believe you're after could be: https://codepen.io/bin-man/pen/NWKNWLm
.image-container img {
object-fit: cover;
}
You can play around with the image sizes and remove object-fit to see how it behaves.
Hope this helps.
Upvotes: 2
Reputation: 4404
I guess this is what you need... Please run the code snippet...
div {
width: 100px;
height: 100px;
}
div > img {
max-width: 100%;
max-height: 100%;
object-fit: scale-down;
}
<div>
<img src="https://www.wellnesspetfood.com/sites/default/files/styles/blog_feature/public/media/images/6615505_950x400.jpg?itok=ylLXPrq6" />
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg" />
</div>
Upvotes: 1
Reputation: 408
@Michelangelo's answer is another way to achieve your objective. If you want your image to be inside a img
tag (like your original post), keep your max-width
and max-height
values, and put one of these inside your CSS class:
1) Keep aspect ratio based on width:
width: 300px; /* Your preferred width */
height: auto;
2) Keep aspect ratio based on height:
width: auto;
height: 300px; /* Your preferred height */
I would also suggest you to take a look at the object-fit
property here:
https://www.w3schools.com/css/css3_object-fit.asp
It kinda acts as background-size
property when you put values like contain
or cover
, with the plus that you can specify width
and height
without complicating your layout / DOM hierarchy. It comes very handy when dealing with intrinsic sizes of elements.
Upvotes: 3
Reputation: 5958
Try doing adding it as background, then you can do this:
div {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Upvotes: 1