CSS: Make object-fit work with min-height - html

Question

Is there any way to make object-fit work with min-height?
See this jsfiddle for example.
If I set a fixed height, it works, but if I set a min-height, it doesn't work.
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: auto;
min-height:130px;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
height: 100%;
width: 100%;
}

Answer 1

The min-height needs to set on the img element, not the container.
In additional, you can also set vertical-align:top or display:block on the img to get rid of the unwanted whitespace below it.
.container {
width:120px;
}
.b_feat_img {
border: 1px solid green;
background: red;
float: left;
height: auto;
margin-bottom: 10px;
overflow: hidden;
width: 100%;
}
.b_feat_img img {
object-fit: cover;
min-height: 130px;
width: 100%;
vertical-align: top;
}
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>

Answer 2

You can use position: absolute to the img in css.
So it will be like:
HTML:
<div class="container">
<div class="b_feat_img">
<img src="http://i.imgur.com/iEJWyXN.jpg">
</div>
</div>
CSS:
.container {
width:120px;
}
.b_feat_img {
position: relative;
border: 1px solid green;
background: red;
float: left;
width: 100%;
min-height:130px;
margin-bottom: 10px;
overflow: hidden;
}
.b_feat_img img {
position: absolute;
height: 100%;
width: auto;
}
fiddle:
https://jsfiddle.net/b93txe6t/1/
Hope that helps.