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/

Answer 1

在浏览器中调整大小是出了名的不可靠（虽然有些浏览器，比如Chrome，比其他浏览器更好）。您可以通过将其添加到CSS来轻微影响它：

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

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

您可以查看browser support for SVGs here;短版本是除非你的目标是IE8及以下，你应该没问题。

Answer 2

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