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

【问题标题】：Make smaller image cover bigger div and maintain aspect ratio使较小的图像覆盖较大的 div 并保持纵横比
【发布时间】：2016-02-08 04:09:19
【问题描述】：

我在具有固定宽度和高度的 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%;
}

【问题讨论】：

当它符合条件时，我将奖励这个问题 50 分。
你没有提到图像的宽度，我假设你希望它覆盖 div 并允许切断边缘。
@Pangloss 是的，没错。只要它覆盖了 div 的高度。

标签： html css image

【解决方案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。

【讨论】：