Question

我在我的css文件中有这个：

.apiscar1 {   
    object-fit: none; 
    object-position: -354px 0; 
    width: 85px;  
    height: 155px; 
}
.apiscar2 { 
    object-fit: none; 
    object-position: -189px 0;
    width: 155px;     
    height: 155px; 
}

我在wordpress页面上调用sprite.png img src。这适用于放置在sprites.png中的大量图像，但它在IE中不起作用。如何让它在IE中运行？

Answer 1

IE / Edge不支持对象适合和对象位置。

Answer 2

我使用了一种解决方法，我将图像设置为元素的背景，background-size可以用作对象适合的替换和对象位置的背景位置

这是你的例子的jsfiddle。 https://jsfiddle.net/124f0hve/

.apiscar1 {   
    background-image: url("http://lorempixel.com/400/200/");
    background-size: cover; 
    background-position: -354px 0; 
    width: 85px;  
    height: 155px; 
}
.apiscar2 { 
    background-image: url("http://lorempixel.com/400/200/sports/");
    background-size: cover; 
    background-position: -189px 0;
    width: 155px;     
    height: 155px; 
}

我使用了lorempixel图像，每次更改都会得到随机图像。如果您查看网络，您将看到已获取的完整图像，并且在屏幕上仅显示其中的一部分。我希望这会有所帮助。

Answer 3

使用position: relative作为包装器并将图像位置设置为绝对值，以进行一些div处理。然后使用top，right，left，bottom设置图像的位置。这是用于IE的对象定位的解决方法。

使对象适合＆amp; Internet Explorer中的对象位置工作

3 个答案: