修复IE11的图像缩放错误?

时间:2019-02-18 21:17:44

标签: html css internet-explorer

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

Snopes homepage

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

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

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

4 个答案:

答案 0 :(得分:1)

  • 禁用img.bg-image> -o-object-fit:封面和object-fit:封面
  • 禁用img>最大宽度:100%,高度:自动
  • 将.bg-image更改为

    .bg-image {     位置:绝对;     顶部:0px;     高度:100%;     显示:inline-block;     左边距:50%;     转换:translateX(-50%); }

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

“ 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>

希望这会有所帮助。

答案 3 :(得分:0)

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

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

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