javascript - 如何添加 object-fit :cover style to IE browser?

Question

我尝试使用“object-fit:cover”样式使图像适合盒子。它在其他浏览器上正常工作。但它在 IE 浏览器上无法正常工作(Internet Explorer 页面看起来不同)。我该如何解决这个问题。下面是我的代码。

<img class="fit-box" src="https://i.pinimg.com/originals/12/64/da/1264da4a3f18207dc22592102abae40d.jpg">

.fit-box{
  width:100%;
  height:229px;
  object-fit:cover;     
}

Answer 1

IE 不支持 object-fit，相反你可以使用 background-size:cover 的背景图片

.fit-box {
  width: 100%;
  height: 229px;
  background-size: cover;
  background-repeat:no-reapeat;
  background-position: 50% 50%;
}

<div class="fit-box" style="background-image: url(https://i.pinimg.com/originals/12/64/da/1264da4a3f18207dc22592102abae40d.jpg">
</div>

在这里，您可以传递与内联样式背景图像 url 相同的源，而不是将 src 传递给图像标签。

此方法适用于所有浏览器。

如果你只想对IE使用这个方法，那么你可以使用Mordernizr来检测支持的功能。更多信息 here