CSS:使用min-height进行对象适合工作

时间:2016-02-08 14:15:28

标签: html css css3

有没有办法让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%;
}

2 个答案:

答案 0 :(得分:3)

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

此外,您还可以在vertical-align:top上设置display:blockimg,以消除其下方不需要的空白。

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

希望有所帮助。