Center image in any viewport without stretching - html

Question

I have 3 different box sizes in which I need to display an image. The image should take the entire width and height of the box but should not stretch. It can crop and center the image.
Here is an example:
https://jsfiddle.net/y1zn0mxy/
If you see the 3 different size, you will see that it works in the first and second case but not in the last one. It would work in the last one if i swap the size of the image tag to:
width: 100%;
height: auto;
but then it will not work in the first two.
Any other way to achieve this?

Answer 1

You can simply achieve the desired effect by inserting your image as background image instead of an <img /> tag. The advantage is, you don't need the image tags and the CSS applied to them. Just use background-size: cover; to always fit the image into the viewport. This way you have much less code and can control the image by the CSS background property.
.img {
background-image: url(http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>

Answer 2

Create a new class for the last image (I called it landscape2 in my jsfiddle) as the last image is the only one with width value higher than the height value. Then add this:
.landscape2 {
width:100%;
}
https://jsfiddle.net/y1zn0mxy/2/

Answer 3

It's normal behaviour. It's normal behaviour. You can't set both axis to 100% because your image will be stretched. Why not add additional class for horizontal landscape: https://jsfiddle.net/y1zn0mxy/1/ ?
If you don't need <img ... /> you can replace it by css properties:
background
background-position
background-size: cover
Here you can see reproduce: https://jsfiddle.net/y1zn0mxy/3/

Answer 4

Besides Andreas good answer, you have a new way to handle this.
Just can achieve just the same functionatily of backgroound-size: cover in an image using object-fit.
It isn't as widely suported (no suport in IE/Edge) but there is a polyfill available
img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.box {
position: relative;
overflow: hidden;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>
<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
<div class="img box" style="padding:0; width: inherit; height: inherit;">
<img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
</div>
</div>