使对象适合和对象位置在 Internet Explorer 中工作

Posted 2023-03-06

【中文标题】使对象适合和对象位置在 Internet Explorer 中工作

【英文标题】：Make object-fit & object-position work in Internet Explorer

【发布时间】：2017-06-07 23:37:39

【问题描述】：

我的 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 中运行？

【问题讨论】：

试试display:block;

不确定您的意思。我用 display:block 代替什么？

将其添加到您的 css 类中

我将此添加到代码中：'.apiscar1 display:block;对象拟合：无；对象位置：-354px 0；宽度：85px；高度：155px；'但它没有用。还有其他建议吗？

【参考方案1】：

在 IE/Edge 中不支持 Object-fit 和 object-position。

【讨论】：

我知道。那么人们如何在考虑到这一点的同时制作精灵呢？

从 Edge 16 开始部分支持<img> 标签。见caniuse.com/#search=object-fit

【参考方案2】：

我使用了一种解决方法，我将图像设置为元素的背景，背景大小可以用作 object-fit 的替代品，而 background-position 可以用作 object-position 的替代品

这是您的示例的 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 图像，每次更改都会获得随机图像。如果您查看网络，您将看到获取的完整图像，并且在屏幕上仅显示其中的一部分。 我希望这会有所帮助。

【讨论】：

你能用我的代码（或其他代码）给我一个例子吗

不知道大家有没有看过，不过我上周加了一个例子。希望对您的问题有所帮助

【参考方案3】：

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