css - 如何在 Internet explore 9/10 和 FF 中提高调整后的图像质量

Question

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

<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/

score 1 · Accepted Answer

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

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

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

您可以在此处查看浏览器对 SVG 的支持；简短的版本是，除非您的目标是 IE8 及以下，否则您应该没问题。

score 0 · Accepted Answer

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

2 回答 2