作为一个小实验,我试图修复使用IE11打开snopes.com主页时获得的错误缩放图像。 (请参见屏幕截图)
请澄清一下,我不是该网站的所有者。
我可以看到受影响的图像属于一个名为“ bg-image”的类,但是作为一个初学者,我几乎不知道从那里去哪里。
有人能建议我可以从IE的devtools控制台尝试一下的快速修复吗?
答案 0 :(得分:1)
将.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中自动转换为背景图像