如何添加对象适合:封面样式到IE浏览器?

Question

我试图使用"object-fit：cover"样式将图像调整到框中。它在其他浏览器上工作正常。但它在IE浏览器上无法正常工作(IE浏览器页面看起来不同(。如何解决问题。下面是我的代码。

<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进行检测 支持的功能。更多信息在这里