css - Internet Explorer 11 图像像素化

标签 css image internet-explorer

我网站的 Logo 在 Internet Explorer 上非常像素化(我的测试是使用 Internet Explorer 11 进行的)。该 Logo 在其他浏览器(Safari、Chrome、Mozilla Firefox)中看起来不错。你你帮帮我,我们的形象太丑了。

我使用的是 Internet Explorer 11(版本:11.407.17134.0)

此外,我遵循了以下指南:IE Fix
但是我在本指南中没有取得任何成功...

图像( Logo )属性: 图片尺寸:5549 x 1101
文件大小:56KB
Screenshot of the Problem .

编辑:
在当前的屏幕截图中,您只能找到一个文本 Logo 。将来我会用 Logo (图像)替换它。我的设计师还没有完成它,因此它不在屏幕截图中。 !抱歉!

CSS 代码:

@media all and (min-width:768px)
body[data-subdomain='customer'] .navbar-brand, body[data-subdomain='school'] .navbar-brand, body[data-subdomain='parents'] .navbar-brand, body[data-subdomain='admincenter'] .navbar-brand {
    background: url(../img/logo.png) no-repeat left center;
    background-size: contain;
    width: 210px;
    margin-left: 15px;
    -ms-interpolation-mode: bicubic;
}

编辑:
JSFiddle: https://jsfiddle.net/hxaeuyp0/11/

最佳答案

-ms-interpolation-mode 设置仅在 IE6-IE8 中有效,但在 IE9 中被删除。所以不会影响结果。

您可以使用名为“Crossbrowser-Bicubic-Image-Interpolation”的插件来解决这个问题。

我刚刚修改了类似问题线程 ( IE thumbnail pixelation when high resolution image is set to small size ) 中的部分代码,效果很好。

这是测试代码。

<script src="https://rawgit.com/sukhoi1/Crossbrowser-Bicubic-Image-Interpolation/master/bicubicInterpolation.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('img.first').bicubicImgInterpolation({
            crossOrigin: 'anonymous' 
        });
    });
</script>

<img id="someId" class="first" width="200" src="https://i.imgur.com/pJtQtzR.png">

the result image

关于像素化问题的更多信息,您可以引用此链接:https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

关于css - Internet Explorer 11 图像像素化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53592652/

相关文章:

javascript - 如何为 HTML 元素创建鼠标拖动 slider ?

css - 将绝对定位转换为相对定位

javascript - 使用 x-ua-compatible 元标记会影响 Javascript 性能吗?

css - Firefox 输入占位符和框大小

python - Numpy 图像数组 : How to efficiently switch from RGB to Hex

javascript - 禁用左键单击(用于心理实验),但在 IE 中焦点发生变化。如何预防?

css - 在 css 中使用 % 作为 Logo 时如何使我的标题 Logo 可点击

css - 如何使用CSS隐藏youtube iframe

html - CSS 居中图像仅通过改变图像属性

javascript - 如何使用JQuery获取真实图像高度?