CSS 样式相当于 IE 的“object-fit:cover”

问题描述

我有一个全宽横幅，我使用这种样式：

.headline--hero {
  width: 100%;
  min-width: 100%;
  padding: 0;
  height: 490px;
}

@media (max-width: 1024px) {
  .headline--hero {
    height: 46vw;
  }
}

.headline--hero>h2 {
  width: 100%;
  height: 100%;
}

.headline--hero>h2>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这在 Chrome 上运行良好。当我使用 CTRL+- 缩小时，全宽横幅调整得很好。 然而在 IE 中，它看起来像样式 object-fit: cover; 不起作用。我尝试使用

.headline--hero>h2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.headline--hero>h2>img {
  height: auto;
  width: 100%;
}

横幅的宽度工作正常，全部为 100%，但高度是问题，我的猜测是因为有一个绝对位置，图像没有移动高度，所以图像没有获得完整的高度。

>

有没有办法在 IE 中复制 object-fit: cover; 样式，而不是我尝试过的样式？

解决方法

很遗憾，IE 不支持 object-fit

这是我找到的文章 - https://css-tricks.com/almanac/properties/o/object-fit/

你可以试试background-size: cover; 作为之前提到的评论中的一个人