如何在 Internet Explorer 9/10 和 FF 中提高调整大小的图像质量答案

【问题标题】：how to improve resized image quality in Internet explore 9/10 and FF如何在 Internet Explorer 9/10 和 FF 中提高调整大小的图像质量
【发布时间】：2013-10-30 21:35:27
【问题描述】：

调整图像大小时图像质量受到干扰。这是代码

<img height="60px" src="http://www.clker.com/cliparts/8/3/3/4/1195445190322000997molumen_red_round_error_warning_icon.svg.med.png" alt="logo" />

如何在 IE 和 FF 中改进它？ http://jsfiddle.net/CdktR/1/

【问题讨论】：

标签： css image internet-explorer

【解决方案1】：

众所周知，在浏览器中调整大小是不可靠的（尽管某些浏览器，如 Chrome，比其他浏览器处理得更好）。您可以通过将其添加到您的 CSS 来稍微影响它：

img { -ms-interpolation-mode: bicubic; -moz-image-rendering: crisp-edges; }

但到目前为止，最好的选择是为网页提供大小合适的图像版本。如果您想稍后更新图像会很痛苦，因为您需要更新多个文件，但我能想到的唯一其他选择是使用 SVG。

您可以查看browser support for SVGs here；简短的版本是，除非您的目标是 IE8 及更低版本，否则应该没问题。

【讨论】：

如果你检查jsfiddle，问题只在IE9和IE10
那么我建议使用 SVG，并为 IE 8 及更低版本提供（调整大小的）图像回退。
使用 svg 得到同样清晰的结果
那么你需要使用调整大小的图形。
图像渲染：-moz-crisp-edges;必须是 -moz-image-rendering: 清晰边缘；

【解决方案2】：

mozilla 有一些关于这个主题的好东西。您可能想要使用图像渲染属性和 -ms-interpolation-mode，具体取决于您的具体目标。

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

【讨论】：