解决IE下图片缩小失真（有锯齿）的问题

 

首先，这不是一个新鲜玩意儿，很多大牛08年就发现了。

其次，这是个所有IE下普遍都会遇到的问题，而非只针对于IE67。（百度了一下，大半左右的文章是针对于IE67的）。自己为什么不能试一下呢？为什么不能实事求是，实话实说呢？

先说一下：-ms-interpolation-mode:bicubic 为IE7私有属性。

interpolation

英 [ɪnˌtəpəʊˈleɪʃən]
美 [ɪnˌtɚpəˈleʃən]

n. 窜改；
添写，插补

bicubic

双三次

再说一下：VML滤镜。

VML介绍

VML的全称是Vector Markup
Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。

操作步骤

  1. 页面增加命名空间

  2. 增加CSS样式，如：

    v\:image{behavior:url(#default#VML);width:128px;height:128px;}

  3. 应用CSS样式的DOM，如：<v:image
    src="DSC_0535.JPG"/>

源代码参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html
xmlns="http://www.w3.org/1999/xhtml">
<html
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>无标题文档</title>

<style>
img{ width:300px; height:200px;}
img.ph{-ms-interpolation-mode:bicubic}
v\:image{behavior:url(#default#VML); display:block; width:300px;
height:200px;}
</style>
</head>
<body>
<img src="DSC_0535.JPG" width="2144" height="1424"
/>
<img src="DSC_0535.JPG" width="2144" height="1424"
class="ph" />
<v:image src="DSC_0535.JPG"/>
</body>
</html>

注意事项

  • 使用v:image，所以需要xmlns:v="urn:schemas-microsoft-com:vml";

  • v:image必须指定display:block，否则图片不可见。

  • v\:image必须指定图片宽高，否则图片不可见。

  • 非IE浏览器不支持，图片不可见。

  • 只对同网站的图片有效。对IE6动态跨域名的图片失真依然无效；

  • 不支持getElementsByName以及getElementsByTagName获取dom,通过ID可以。

效果截图：第一幅图为默认样式，第二幅为添加了-ms-interpolation-mode:bicubic，第三幅图为运用了：

IE6，8，9：

IE7的比较明显：

可以看出，第一幅图完全有锯齿，第三幅图虽然没有，但是仿佛加上了“高斯模糊”效果。只有第二幅图既清晰又无锯齿。

至于火狐，opera将2144*1424的照片缩至900*600是看不出锯齿的，但如果缩至300*200仍然会有。chrome和safari则不存在这个问题，完全绝对清晰平滑。效果同IE7下的第二幅图。

ie兼容图片缩小后模糊失真（锯齿）问题的更多相关文章

  1. WPF图片放大后模糊的解决方法

    原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...

  2. flash导入图片缩放后出现毛边、失真、锯齿、文字模糊不清晰的情况

    原因: 1.flash的性能非常差,这就不得不让它做大量的优化. 2.图片缩放,目前业界有多种算法,画质越好的算法,计算量越大. 3.flash优化了图片缩放,使用了质量非常低的缩放算法.这个做法,保 ...

  3. WPF_界面_图片/界面/文字模糊解决之道整理

    原文:WPF_界面_图片/界面/文字模糊解决之道整理 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010265681/article/detai ...

  4. C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别

    这两天撸了一个需求,通过 JS  调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...

  5. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  6. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  7. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  8. 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  9. UIScrollView中图片放大后不居中，或居中后移动有偏差解决办法

    转自:http://blog.sina.com.cn/s/blog_6ae8b50d0100yret.html 问题的描述如下:要显示一张图片,也只需要显示一张图片,该图片可能很大,也可能很小,但是要 ...

随机推荐

  1. wireshark----linux

    1.[root@lc~]# tshark   Running as user "root" and group "root". This could be da ...

  2. socket.io websocket

    不能不知道的事: 在Http协议中,客户端向服务器端发送请求,服务器端收到请求再进行回应,整个过程中,服务器端是被动方,客户端是主动方: websoket是H5的一种基于TCP的新通信协议,它与Htt ...

  3. $ cd `dirname $0` 和PWD用法

      在命令行状态下单纯执行 $ cd `dirname $0` 是毫无意义的.因为他返回当前路径的".".这个命令写在脚本文件里才有作用,他返回这个脚本文件放置的目录,并可以根据这 ...

  4. 《转》Robot Framework 的安装配置和简单的实例介绍

    Robot Framework 介绍 Robot Framework 是一款基于 Python 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...

  5. linux 查看版本

    输入"uname -a ",可显示电脑以及操作系统的相关信息. 输入"cat /proc/version",说明正在运行的内核版本.输入"cat /e ...

  6. Win8设计——现代设计，可使你的应用脱颖而出的元素

    Microsoft 设计准则 Windows 在现代设计方面遥遥领先.它采用了“真实数字”原则并从瑞士风格和交通枢纽的寻路系统中汲取灵感. 阅读详细信息 设计元素 动态磁贴 动态磁贴向你提供了一个独特 ...

  7. SQL Server2008安装后1433端口没监听问题

    win2008系统安装完SQL Server2008后发现1433端口并没有监听,netstat -an并没有发现监听的1433端口,本机telnet localhost 1433也连不通,百度之后说 ...

  8. android include标签的使用，在RelativeLayout中使用include标签需注意!!!!!

    转:http://4265337.blog.163.com/blog/static/195375820127935731114/ include和merge标记的作用主要是为了解决layout的重用问 ...

  9. 使用MSBUILD 构建时出错 error MSB3086: 任务未能使用 SdkToolsPath“”或注册表项“XXX”找到“LC.exe”，请确保已设置 SdkToolsPath。

    如果项目有添加有WB引用,比如引用其它网站的WEB服务等,那么VS在编译时会自动生成个 [项目名称].Serializers.dll的文件,就是把引用服务中的相关对象信息生成硬编码的程序集,以提高效率 ...

  10. Rsync未授权访问漏洞的利用和防御

    首先Rsync未授权访问利用 该漏洞最大的隐患在于写权限的开启,一旦开启了写权限,用户就可以,用户就可以利用该权限写马或者写一句话,从而拿到shell. 我们具体来看配置文件的网相关选项(/etc/r ...