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>

在这里，您可以将src传递给内嵌样式background-image url，而不是传递src到image标签。

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

如果您只想对IE使用此方法，则可以使用Mordernizr进行检测支持的功能。更多信息here

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

1 个答案: