See http://jsfiddle.net/aJ333/1/ http://jsfiddle.net/aJ333/1/在 Chrome 中，然后在 Firefox 或 Internet Explorer 中。图像最初是 120 像素，我缩小到 28 像素，但无论缩小到什么，看起来都很糟糕。
该图像是 PNG 格式，有一个 Alpha 通道（透明度）。
这是相关代码：
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;
}
The image-rendering and -ms-interpolation-modeCSS 行似乎没有做任何事情，但我在对这个问题进行一些研究时在网上找到了它们。
看来你是对的。没有选项可以更好地缩放图像：
http://www.maxrev.de/html/image-scaling.html http://www.maxrev.de/html/image-scaling.html
我测试过 FF14、IE9、OP12 和 GC21。只有 GC 具有更好的扩展性，可以通过以下方式停用image-rendering: -webkit-optimize-contrast。所有其他浏览器都没有缩放/缩放很差。
不同输出的屏幕截图：http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png
2017年更新
同时更多的浏览器支持平滑缩放：
ME38（Microsoft Edge）具有良好的扩展性。它无法禁用，并且适用于 JPEG 和 PNG，但不适用于 GIF。
-
FF51（关于 FF21 以来 @karthik 的评论）具有良好的缩放功能，可以通过以下设置禁用：
image-rendering: optimizeQuality
image-rendering: optimizeSpeed
image-rendering: -moz-crisp-edges
Note: 关于MDN https://developer.mozilla.org/de/docs/Web/CSS/image-rendering the optimizeQuality设置是同义词auto (but auto不禁用平滑缩放）：
早期草案中存在的值 optimizationQuality 和 optimizeSpeed
（来自其 SVG 对应项）被定义为同义词
自动值。
-
OP 43 的行为类似于 GC（这并不奇怪，因为它是自 2013 年起基于 Chromium https://en.wikipedia.org/wiki/Opera_(web_browser)#History）并且它仍然是禁用平滑缩放的选项：
image-rendering: -webkit-optimize-contrast
IE9-IE11 不支持。这-ms-interpolation-mode该设置仅在 IE6-IE8 中有效，但IE9 中删除 https://stackoverflow.com/a/6147510/318765.
附：默认情况下会进行平滑缩放。这意味着没有image-rendering需要选项！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
