Question

我的网站徽标在Internet Explorer（我的测试是使用Internet Explorer 11进行的）上非常像素化。该徽标在其他浏览器（Safari，Chrome，Mozilla Firefox）中看起来不错。您，请帮助我，我们的形象太丑了。

我使用了Internet Explorer 11（版本：11.407.17134.0）

我进一步遵循了以下指南：IE Fix
但是我在本指南上没有取得任何成功...

图像（徽标）属性：图片尺寸：5549 x 1101
档案大小：56KB
Screenshot of the Problem。

修改：
在当前屏幕截图中，您只能找到一个文字徽标。将来我会用徽标（图片）代替它。我的设计师尚未完成，因此它不在屏幕截图中。抱歉！

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/

Answer 1

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

有关像素问题的更多信息，请参考以下链接：https://github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

Internet Explorer 11图像像素化

1 个答案: