IE7 下图片缩小失真的解决办法

文章来源： IE7 下图片缩小失真的解决办法

一张大图在尺寸小于原始尺寸时，ie7下会表现的很糟糕，画面失真呈锯齿状，如下图：
看看美女变兽+兽了——



别着急，强大的MS有解决方案
请参看： msInterpolationMode Property
img { -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */ }

Firefox在3.6版本新增了一个css属性：image-rendering
他的用途更加广泛，用于：

    * images
    * background-images of any element
    * HTML5 <video> Element
    * HTML5 <canvas> Element

image- rendering用法：
img { image-rendering: optimizeQuality; /* Firefox 3.6 */ }

详细介绍： image-rendering

对比一下浏览器对图片失真处理方法：
浏览器对图片失真处理方法对比 浏览器 最低版本 提供CSS属性
Internet Explorer 7.0 -ms-interpolation-mode: bicubic | nearest-neighbor

仅支持非透明图像格式 (如JPG, GIF, PNG); 无继承属性
Firefox (Gecko) 3.6 (1.9.2) image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges
Opera --- ---
Safari (WebKit) --- ---