注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

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

2011-04-26 21:25:11|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一张大图在尺寸小于原始尺寸时,ie7下会表现的很糟糕,画面失真呈锯齿状,如下图,美女脸上起了毛刺:
ie-interpolation-mode.jpg

别着急,强大的MS有解决方案,微软提供的私有属性 -ms-interpolation-mode,请参看: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 Explorer7.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)------

更多的测试可以到可以到MSDN 做的例子看一下效果,或者到血 統の森-web実験小屋看一下效果。

原文:http://www.microidc.com/tag/ms-interpolation-mode/

  评论这张
 
阅读(2004)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017