Internet Explorer 11 图像像素化

Posted 2023-03-06

【中文标题】Internet Explorer 11 图像像素化

【英文标题】：Internet Explorer 11 image pixelated

【发布时间】：2019-05-04 16:22:13

【问题描述】：

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

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

我还遵循以下指南：IE Fix 但是我没有用这个指南取得任何成功......

图像（徽标）属性： 图片尺寸：5549 x 1101 文件大小：56KBScreenshot 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;

编辑： JSF中： https://jsfiddle.net/hxaeuyp0/11/

【问题讨论】：

你确定图片加载成功了吗？

@J.vee 是的，当然！

您的屏幕截图中的徽标是否只是显示“学校经理”的部分？

@XM37 我不确定您是否想要认真的 cmets 以您的响应方式，但我不明白为什么您需要 56KB 5549 x 1101 文件来呈现文本“学校经理” '。也许还有更多你没有告诉我们的。我建议只使用文本，或者如果您需要以响应方式缩放的内容，然后是简单的 SVG 文件，或者只使用不同的 CSS 类。

@XM37 ...您的徽标看起来像是“只是文字”，因此 J.vee 的建议是真实的，但您的回答（“感谢您提出这个绝妙的想法”）听起来很讽刺。此外，也许您还可以解释为什么不能只使用文本以及为什么需要 56K 图像文件。我们只是想提供帮助。

【参考方案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"  src="https://i.imgur.com/pJtQtzR.png">

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