css - Internet Explorer 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/

Answer 1

ブラウザーでのサイズ変更は、信頼性が低いことで有名です (ただし、Chrome などの一部のブラウザーは、他のブラウザーよりもこれをうまく処理します)。これを CSS に追加することで、わずかに影響を与えることができます。

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

しかし、最適なオプションは、適切なサイズの画像のバージョンを Web ページに提供することです。複数のファイルを更新する必要があるため、後で画像を更新する場合は面倒ですが、他に考えられる唯一のオプションは SVG を使用することです。

ここで SVG のブラウザー サポートを確認できます。短いバージョンは、IE8 以下をターゲットにしている場合を除き、問題ないはずです。