修复IE11的图像缩放错误？

Question

作为一个小实验，我试图修复使用IE11打开snopes.com主页时获得的错误缩放图像。 （请参见屏幕截图）

请澄清一下，我不是该网站的所有者。

我可以看到受影响的图像属于一个名为“ bg-image”的类，但是作为一个初学者，我几乎不知道从那里去哪里。

有人能建议我可以从IE的devtools控制台尝试一下的快速修复吗？

Answer 1

• 禁用img.bg-image> -o-object-fit：封面和object-fit：封面
• 禁用img>最大宽度：100％，高度：自动

• 将.bg-image更改为

  .bg-image {     位置：绝对；     顶部：0px；     高度：100％;     显示：inline-block;     左边距：50％；     转换：translateX（-50％）; }

我检查了一下，它同时适用于chrome和IE。

Answer 2

使用background-size: cover;而不是object-fit，因为它在ie11中没有用

Answer 3

“ IE”浏览器通常不支持“对象适合”属性，

-o-object-fit: cover;
object-fit: cover;

参考链接：https://caniuse.com/#search=object-fit

解决方案：
请参考以下解决方案链接：Object-fit: cover; alternative?

注意：
将该图像用作背景。

“ snopes.com”中的示例代码：

之前：

<img class="bg-image lazy-resource" src="https://www.snopes.com/tachyon/2015/05/titanic-P.jpeg?resize=865,452" alt="Did a Black Woman Named Malinda Borden Perish Because Titanic’s Lifeboats Were ‘Whites Only?’" data-lazy-loaded="true" style="display: block;">

解决方案：

方法1：
将背景图片应用于image标签中的元素。

<div class="set-bg-image">
    <img class="bg-image lazy-resource" src="https://www.snopes.com/tachyon/2015/05/titanic-P.jpeg?resize=865,452" alt="Did a Black Woman Named Malinda Borden Perish Because Titanic’s Lifeboats Were ‘Whites Only?’">
</div>

<style type="text/css">
    .bg-image {
        visibility: hidden;
        opacity: 0;
    }
    .set-bg-image {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.bg-image').each(function(){
            var backgroundImageUrl = jQuery(this).attr("src");
            jQuery(this).closest('.set-bg-image').css('background-image', 'url(' + backgroundImageUrl + ')');
        });
    });
</script>

方法2：
您可以在解析时将背景图像直接分配给“ set-bg-image”元素。

例如：

<div class="set-bg-image" style="background-image: url('https://www.snopes.com/tachyon/2015/05/titanic-P.jpeg')">
</div>

<style type="text/css">
    .set-bg-image {
        min-height: 150px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>

希望这会有所帮助。

Answer 4

有一个适合对象匹配的polyfill：带有IE支持的封面：

https://github.com/bfred-it/object-fit-images

只需将该库导入您的网站，您的图像就会在IE中自动转换为背景图像