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%;
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With