图像缩放导致在Firefox /互联网浏览器，但不是铬的质量差 [英] Image scaling causes poor quality in firefox/internet explorer but not chrome

问题描述

请参阅 http://jsfiddle.net/aJ333/1/ 的Chrome，然后在Firefox或Internet Explorer中。图片最初是120像素，我缩小到28像素，但它看起来很糟糕，无论你缩放到什么。

See http://jsfiddle.net/aJ333/1/ in chrome and then in either firefox or internet explorer. The image is originally 120px, and I'm scaling down to 28px, but it looks bad pretty much no matter what you scale it down to.

图片是一个PNG

以下是相关代码：

html:
<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
    <img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>​

css:
a {width:28px;height:28px;display:block}
img {max-width:100%;max-height:100%;
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: bicubic
}

和-ms-interpolation-mode行的css似乎没有做任何事情，但我发现他们在线，同时做一些研究的问题。

The image-rendering and -ms-interpolation-mode lines of css didn't seem to do anything, but I found them online while doing some research on the problem.

推荐答案

看来你是对的。没有选项可以更好地缩放图片：

It seems that you are right. No option scales the image better:

http：// www.maxrev.de/html/image-scaling.html

我已测试过FF14，IE9，OP12和GC21。只有GC具有更好的缩放，可以通过图像呈现：-webkit-optimize-contrast 来停用。

I've tested FF14, IE9, OP12 and GC21. Only GC has a better scaling that can be deactivated through image-rendering: -webkit-optimize-contrast. All other browsers have no/poor scaling.

不同输出的屏幕截图：http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Screenshot of the different output: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

这篇关于图像缩放导致在Firefox /互联网浏览器，但不是铬的质量差的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！