Question

我有一个用户上传的图像在div内部，具有固定的宽度和高度。内部图像垂直对齐中心。工作正常。

问题在于，有时，图像的高度小于div的高度。

例如，请参阅此jsfiddle。

如何使图像始终适合div 的高度并保持其宽高比？

HTML：

<div class="container">

  <div class="b_feat_img">
     <img src="http://i.imgur.com/iEJWyXN.jpg">
  </div>

  <div class="b_feat_img">
     <img src="http://i.imgur.com/qRkEJni.jpg">
  </div>

</div>

CSS：

.container {
  width:120px;
}

.b_feat_img {
    border: 1px solid green;
    background:red;
    float: left;
    height: 96px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
}

.b_feat_img img {
    height: auto;
    position: relative;
    top: 50%;
    transform: translate(0px, -50%);
    width: 100%;
}

Answer 1

在支持的浏览器中*。您可以使用值 cover 的 object-fit ，它与background-size:cover的工作方式类似，但适用于内联图片。

.b_feat_img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.container {
  width: 120px;
}
.b_feat_img {
  border: 1px solid green;
  background: red;
  float: left;
  height: 96px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
}
.b_feat_img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

<div class="container">
  <div class="b_feat_img">
    <img src="http://i.imgur.com/iEJWyXN.jpg">
  </div>
  <div class="b_feat_img">
    <img src="http://i.imgur.com/qRkEJni.jpg">
  </div>
</div>

*请注意，在撰写本文时，IE不支持它，请务必看到support tables。

使较小的图像覆盖较大的div并保持纵横比

1 个答案: