关于图片缩放失真的解决方法

首先先赞一下咱的设计师，微调了一下一点点的失真都被她发现了。

其实做前端应该经常会碰到这个问题，对图片的缩放会产生失真，主要是体现在IE上了，图片会出现锯齿。在FF、chorme等浏览器上不存在问题，天生就可以对缩放的图片进行柔化。对于这个问题，有人提出过用 -ms-interpolation-mode: bicubic; 来解决，不过这是IE7的私有属性，对于当前仍然占大头的IE6还是不能撒手不管呀。

解决的方法就是：VML。VML是一种基于XML的语言，可能有些朋友会觉得很陌生，其实当你从WORD里复制一段内容直接粘贴到HTML里的话，发现多出来的那一些所谓的WORD的样式，那就是VML。VML的全称是The Vector Markup Language(矢量可标记语言)，从这个名字我们就能理解为什么它可以处理图片缩放失真的问题了。哎，在这里也不说太多了，其实本民工也不太熟，临时了解的一些而已了，嘿嘿。

VML是IE only的，不过刚才也说过了，在FF、chorme等浏览器上是没有这个问题的（另，IE8中也已经解决这个问题），也就是说解决了IE也就解决了这个问题了。我还是直接帖DEMO吧，我也是现学现卖了，对VML有兴趣的同学可以到这里看看 http://www.infowe.com/vml/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> img {width:300px; height:300px; -ms-interpolation-mode: bicubic;} v\:image{behavior: url(#default#VML);width:300px; height:300px; display:inline-block;} </style> <title>全兼容解决图片缩放失真</title> </head> <body> <img src="http://www.moondyzone.com/wp-content/uploads/2010/05/qq.gif" /> <v:image src= "http://www.moondyzone.com/wp-content/uploads/2010/05/qq.gif"></v:image> </body> </html>

提示：你可以先修改部分代码再运行。

在这里还得说下，用IE打开的话，会看到两个图片的对比，而非IE的因为不支持VML所以只能看到一个图。而在实际应用中，应该通过后台程序判断当前的浏览器，然后选择是输出img还是v:image。

最后再说下，在不是很有必要的情况下，我觉得还是保证图片的原尺寸比较好，因为缩放的还是不及原尺寸的清晰。

暂时没有相关文章！

Moondy 发表于 2010-5-4 3,987 Views | 类别: Xhtml/Css

16条留言立即发表评论

#1changhong @ 2010-5-8 16:22 回复

要是能学到你的水平就好了！
#2Script @ 2010-5-15 12:02 回复

文章都很不错哦，周末愉快,以后会经常来逛的^-^
- moondy @ 2010-5-15 21:21 回复
  
  谢谢，欢迎！
#3Script @ 2010-5-16 12:14 回复

我们坚信，没有什么不可以…
#4Script @ 2010-5-17 20:39 回复

每天顶你一次，生活就又丰富了一点..
- moondy @ 2010-5-17 23:26 回复
  
  多谢支持，不过工作比较忙，都没什么时间写东西咯。
#5Script @ 2010-6-5 12:13 回复

又来访了，顶你来了
#6Script @ 2010-6-14 16:07 回复

端午节快乐^-^
- moondy @ 2010-6-14 18:20 回复
  
  谢谢呀，也祝你快乐！
#7iOver @ 2010-6-14 20:46 回复

过来偷点东西~~

呵呵

看到你的浏览量好高啊~~ 怎么回事尼？
- moondy @ 2010-6-16 13:32 回复
  
  我也不知道这浏览量是怎么算的，反正用的是WP的一个统计插件，故意没把搜索引擎爬虫过滤掉而已了，呵呵。
#8易棋牌 @ 2010-6-16 11:21 回复

不错哦““““有空来我这看看
#9Script @ 2010-6-16 18:32 回复

记得吃粽子…
#10匿名 @ 2010-6-28 11:36 回复
#11Script @ 2010-7-10 11:33 回复

又来看你了，也学习来了。
- moondy @ 2010-7-11 01:16 回复
  
  可是一直都比较忙，都很久没有更新了。