如何在IE浏览器中添加object-fit：封面样式？

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>

在这里，你可以传递与内联样式background-image url相同的源，而不是将src传递给image标签。

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

如果您只想将此方法用于IE，则可以使用Modernizr检测支持的功能。更多信息qazxsw poi