gpt4 book ai didi

html - CSS:使对象适合最小高度

转载 作者:搜寻专家 更新时间:2023-10-31 22:59:06 24 4
gpt4 key购买 nike

有什么方法可以使 object-fitmin-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%;
}

最佳答案

min-height 需要在 img 元素上设置,而不是容器。

此外,您还可以在 img 上设置 vertical-align:topdisplay:block 来去除不需要的空白在它下面。

.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>

关于html - CSS:使对象适合最小高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35271761/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com