ie兼容图片缩小后模糊失真（锯齿）问题
解决IE下图片缩小失真（有锯齿）的问题
首先，这不是一个新鲜玩意儿，很多大牛08年就发现了。
其次，这是个所有IE下普遍都会遇到的问题，而非只针对于IE67。（百度了一下，大半左右的文章是针对于IE67的）。自己为什么不能试一下呢？为什么不能实事求是，实话实说呢？
先说一下：-ms-interpolation-mode:bicubic 为IE7私有属性。
interpolation
美 [ɪnˌtɚpəˈleʃən]
n. 窜改；
添写，插补
bicubic
双三次
再说一下：VML滤镜。
VML介绍
VML的全称是Vector Markup
Language(矢量标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。VML是微软1999年9月附带IE5.0发布的，故只有IE5.0以上版本对VML提供支持。
操作步骤
页面增加命名空间
增加CSS样式，如：
v\:image{behavior:url(#default#VML);width:128px;height:128px;}
应用CSS样式的DOM，如：<v:image
src="DSC_0535.JPG"/>
源代码参考
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兼容图片缩小后模糊失真（锯齿）问题的更多相关文章
- WPF图片放大后模糊的解决方法
原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...
- flash导入图片缩放后出现毛边、失真、锯齿、文字模糊不清晰的情况
原因: 1.flash的性能非常差,这就不得不让它做大量的优化. 2.图片缩放,目前业界有多种算法,画质越好的算法,计算量越大. 3.flash优化了图片缩放,使用了质量非常低的缩放算法.这个做法,保 ...
- WPF_界面_图片/界面/文字模糊解决之道整理
原文:WPF_界面_图片/界面/文字模糊解决之道整理 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010265681/article/detai ...
- C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别
这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- UIScrollView中图片放大后不居中，或居中后移动有偏差解决办法
转自:http://blog.sina.com.cn/s/blog_6ae8b50d0100yret.html 问题的描述如下:要显示一张图片,也只需要显示一张图片,该图片可能很大,也可能很小,但是要 ...
随机推荐
- python--Anaconda学习笔记
http://study.163.com/course/courseLearn.htm?courseId=1003664056#/learn/video?lessonId=1048567028& ...
- 最短路径——Dijkstra算法和Floyd算法
Dijkstra算法概述 Dijkstra算法是由荷兰计算机科学家狄克斯特拉(Dijkstra)于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图(无 ...
- open-falcon之transfer
功能 负责数据转发,接受agent上报的数据,然后使用一致性hash规则对数据进行分片,最后将分片后的数据分别转发至judge,graph 对接收到的数据进行合法性校验.规整 针对每个后端实例维护一个 ...
- Django restframwork教程之类视图(class-based views)
我们也可以使用类的views写我们的API,我们将看到这是一个强大的模式,允许我们重用公共功能,让我们的代码整洁 使用Class-based Views重新改写我们的API 打开views.py文件, ...
- 【cs229-Lecture7】支持向量机（SVM）
SVM不错的学习资料: 百度网盘链接: http://pan.baidu.com/s/1hqw0Rnm 密码: asec blog:http://www.blogjava.net/zhenandaci ...
- SVN —— 如何设置代理
如果在使用SVN下载外网的资源时,出现这样的提示:No such host is known. 或者 不知道这样的主机,可能是机器网络的问题. 如果浏览器能够正常访问外网,那应该是网络设置了代理的问题 ...
- 用ChrootDirectory限制SFTP登录的用户只能访问指定目录且不能进行ssh登录
创建不能ssh登录的用户sftpuser1,密码用于sftp登录: sudo adduser sftpuser1 --home /sftp/sftpuser1 --shell /bin/false s ...
- 栈和队列的基础算法学习（EPI）
今天学习的时间虽然挺多的,但是总觉效率不高.其实今天没有按照计划进行EPI题目的浏览,白天去看了其他的书籍.准备找工作可能需要的状态是一定量经典的书,偶尔温习才可.书是看不完的,知识点也是固定的.所以 ...
- Ant的Manifest任务
建立一个清单文件,他将放入某个jar,作为jar文件的说明书.其中,在清单文件可以指定jar文件的main-class,jar文件将可以直接运行.例子: <manifest > < ...
- MVC + ajaxform 文件上传
一.前端cshtml代码 <tr> <td width="130" align="right">添加附件:</td> @us ...