对象适合的图像未填充容器

Question

我有一张横幅图片，宽度大于高度。我有一个显示不同尺寸图像的容器 div，对于横幅样式，我需要它拉伸 and/or 挤压以在两个方向上填充父级 div。我看过 object-fit:fill，但它似乎只是水平拉伸图像 - 它没有做任何事情让它垂直填充 div。

一个有效的例子是here；代码如下所示：

.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 的各种值，其中 none 满足了我的需要。）图像应该被水平挤压并垂直拉伸以完全填充绿色边框内的区域。

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>

此处有更多详细信息：

对象适合的图像未填充容器

Image with object-fit not filling container

html

css

object-fit