使用object-fit属性的图片无法填满容器

Question

我有一张比高度宽的横幅图片。我有一个显示不同大小图片的容器div，在横幅样式中，我需要它在两个方向上拉伸或压缩以填充父div。我查看了object-fit:fill，但它似乎只会水平地拉伸图像 - 它并不会使其垂直地填充div。

一个工作示例在这里；代码如下：

.tile {
  position: relative;
  float: left;
  margin: 10px;
  border: 4px solid green;
  height: 400px;
}

.deal {
  width: 342px;
  background: #ffffff;
}

.tileImage.promo {
  object-fit: fill;
}

<div class="tile deal hsNational active">
  <img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg" height="200px">
</div>

我哪里出了问题？（我已经尝试了各种 object-fit 的值，但没有一个能满足我的需求。）该图像应水平压缩并垂直拉伸以完全填充绿色边框内的区域。

- EmmyS

Answer 1

定义图片的尺寸，然后使用object-fit即可实现：

.tile {
    position: relative;
    float: left;
    margin: 10px;
    border: 4px solid green;
    height: 400px;
}

.deal {
    width: 342px;
    background: #ffffff;
}

.tileImage.promo {
    object-fit: fill; /* also try 'contain' and 'cover' */
    width: 100%;
    height: 100%;
}

<div class="tile deal hsNational active">
  <img class="tileImage promo" src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg">
</div>

更多细节请参见：为什么 object-fit 在 flexbox 中不起作用？

- Michael Benjamin

---

谢谢，这正是我需要的。我是一名后端开发人员，所以我的 CSS 不是特别强，而且我看到的示例没有提到需要设置图像的默认大小。 - EmmyS

如果我需要在DIV中使用多个图像，该怎么办？我不能将高度和宽度都定义为100％，否则第一张图片会占用所有可用空间并覆盖其余的图像。但是，如果我不定义宽度或将其定义为“auto”，则什么也不会发生。 - Michael

天啊，谢谢你！我整晚都在与这个东西搏斗。 - bhu Boue vidya