当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:在IE7下生成高质量CSS缩略图

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 CSS教程:在IE7下生成高质量CSS缩略图


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 45 ::
收藏到网摘: n/a

在前端开发中,我们经常遇到这样的情况:服务器传到前端的图片需要缩小以显示(如下),在将其缩放之后,IE中图片效果不容乐观。

<img class="thumb" src="pic.jpg" alt="This image is really 500x500 big" width="50" height="50" />

IE7支持自定义双三次“重采样模式”。devthought为我们提供了一种在IE7中生成高质量缩略图方法,只需要对图片使用下面的css属性,即可修复图片质量。

img.thumb { -ms-interpolation-mode: bicubic; }

-ms-interpolation-mode还有另外一个属性值:nearest-neighbor。它使用的是最近邻近插值算法,会产生比较明显的锯齿,图片模糊。对于生成高质量缩略图来说显然不可取。

schill对比了缩略图在各个浏览器间的差异。与其它浏览器比较,opera中图像边缘略显粗糙。总体来说,主流浏览器中缩略图片质量还不错。

遗憾的是,IE6好像还没有很好的方法对缩略图片作平滑处理。