CSS：如何让object-fit与min-height一起使用

Question

是否有办法使 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%;
}

- Henrik Petterson

---

您是否希望img容器元素扩展到完整的图像高度？ - skobaljic

Answer 1

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

另外，您还可以在 img 上设置 vertical-align:top 或 display: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>

- Stickers

Answer 2

你可以在 CSS 中使用 position: absolute 来控制 img 元素的位置。

代码示例：

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

希望能有所帮助。

- DebRaj