Make smaller image cover bigger div and maintain aspect ratio - html

Question

I have a user uploaded image inside of a div with a fixed width and height. The image inside is aligned to the center vertically. Works fine.
The problem is that sometimes, the height of the image is smaller than the height of the div.
See this jsfiddle for example.
How do I make the image always fit the height of the div and maintain its aspect ratio?
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
<div class="b_feat_img">
<img src="http://i.imgur.com/qRkEJni.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background:red;
float: left;
height: 96px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
height: auto;
position: relative;
top: 50%;
transform: translate(0px, -50%);
width: 100%;
}

Answer 1

In supported browsers*. You can use object-fit with value of cover, it works similarly to background-size:cover, but for inline images.
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}
.container {
width: 120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: 96px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
<div class="b_feat_img">
<img src="http://i.imgur.com/qRkEJni.jpg">
</div>
</div>
* Note, at the time of writing, IE doesn't support it, be sure to see the support tables.