0

我有一个全宽横幅，我使用这种风格：

.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%，但高度是问题，我的猜测是因为有一个绝对位置，图像没有移动高度，所以图像没有得到完整的高度。

有没有一种方法可以object-fit: cover;在 IE 中复制我尝试过的其他样式？

4

1 回答 1

0

不幸object-fit的是 IE 不支持

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

您可以在前面提到的评论中尝试background-size: cover; 作为一个人

于 2021-03-01T03:54:24.537 回答