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

文章来源：[url=http://www.microidc.com/Y-2010/html-css/ms-interpolation-mode-image-rendering]IE7 下图片缩小失真的解决办法[/url]

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

[img]http://dl.iteye.com/upload/attachment/208600/0261cdb3-b990-348e-b423-c5b2326267f2.jpg[/img]

别着急，强大的MS有解决方案
请参看：[url=http://msdn.microsoft.com/en-us/library/ms530822%28VS.85,loband%29.aspx]msInterpolationMode Property[/url]
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 */ }

详细介绍：[url=https://developer.mozilla.org/en/CSS/image-rendering]image-rendering[/url]

对比一下浏览器对图片失真处理方法：
浏览器对图片失真处理方法对比 浏览器 最低版本 提供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) --- ---