相关疑难解决方法(0)

我注意到IE9以非常低的质量呈现尺寸缩小的图像:如果我在200x150 IMG标签中显示800x600 jpg图像,IE9中的结果非常令人失望.

在IE8和Chrome中,同一页面显示完美.IE7也行,只要我使用CSS样式-ms-interpolation-mode: bicubic;).Firefox显示与IE9相同的令人沮丧的结果,但这似乎是一个已知的错误,请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=486918

我已经搜索了Stack Overflow和其他论坛,但没有发现有关IE9渲染与IE8的任何投诉.

有没有人知道这是IE9中的一个错误.有解决方法吗？

我无法提交图片,因为我是Stack Overflow的新用户.但您可以轻松重现该问题:

在Paint.Net中创建一个带有画笔宽度为1或2的椭圆的800x600.jpg.以200px x 150px IMG标签显示此图像将IE9与Chrome和IE8进行比较(使用IEtester)

尝试在IE7和IE9中打开此页面.

如页面所述,它使用-ms-interpolation-mode:bicubic.

我已经读过IE8/9中已禁用此设置,因为它现在是默认样式(在IE7中,最近邻居是默认插值模式).

但是,IE8/9中的图像质量比IE7差很多,如下所示:

是什么赋予了？有没有办法在IE8/9中获得更好的缩小图像？

当前版本的插件不支持修复透明背景图像的像素化问题。但它展示了如何使用画布修复它。添加 WebGL 功能将使其速度更快，并能够处理具有透明背景的图像。

$( document ).ready(function() {
    $('img.first').bicubicImgInterpolation({
            crossOrigin: 'anonymous' //for demo purpose
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/sukhoi1/Crossbrowser-Bicubic-Image-Interpolation/master/bicubicInterpolation.js"></script>

Handled by <b>Bicubic Image Interpolation</b> plugin:<br>
<img id="someId" class="first" width="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Text_Line_Length.png/800px-Text_Line_Length.png"><br>

IE9 to IE11 and Edge <b>pixelated thumbnail</b>:<br> 
<img class="second" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Text_Line_Length.png/800px-Text_Line_Length.png" width="200" alt=""><br><br>

我找到了一个插件，它似乎可以解决所有版本的 IE 和 Edge 浏览器的像素化问题，它被称为“Crossbrowser-Bicubic-Image-Interpolation”。

这是一个代码片段，可以解决许多使用 jQuery 的人的问题。

详细参考GitHub上的问题。

使用CSS或width/height属性,可以在浏览器中调整img元素的大小.

使用这个(广泛)一个好策略,有什么缺点？