有没有办法让object-fit
与min-height
一起使用?
例如,请参阅此jsfiddle。
如果我设置了固定的height
,它可以正常工作,但如果我设置了min-height
,它就不起作用了。
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%;
}
答案 0 :(得分:3)
min-height
需要在img
元素上设置,而不是容器。
此外,您还可以在vertical-align:top
上设置display:block
或img
,以消除其下方不需要的空白。
.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>
答案 1 :(得分:0)
您可以将position: absolute
用于css中的img
。
所以它会像: 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;
}
小提琴:
https://jsfiddle.net/b93txe6t/1/
希望有所帮助。