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

【问题标题】：CSS style equivalent of "object-fit: cover" for IE相当于 IE 的“object-fit:cover”的 CSS 样式
【发布时间】：2021-03-01 11:54:24
【问题描述】：

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

.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; 而不是我尝试过的样式？

【问题讨论】：

你试过background-size: cover;吗？
@BertW 不，我不会查找并尝试一下

标签： html css media-queries object-fit

【解决方案1】：

很遗憾，IE 不支持 object-fit

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

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

【讨论】：