Automatically scale image while keeping aspect ratio - html

Question

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 :)

Answer 1

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;
}

Answer 2

#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.

Answer 3

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.

Answer 4

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>