CSS教程:在IE7下生成高质量CSS缩略图

2016-02-20 00:13 7 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的CSS教程:在IE7下生成高质量CSS缩略图教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

来源:http://www.tulaoshi.com/n/20160220/1631503.html

延伸阅读
标签: PHP
一直想在网上找个图片所略图程序,但是一直没有找到无变形的,一般都是对原图进行简单的缩放。 我想也许已经有了,只是我没有找到,所以没办法自己写了一个,其实也不是全是自己写的,只是 在已有的基础上改的! 源码如下: <?php /* *版权说明:该版本是在“IEB_UPLOAD CLASS Ver 1.1”的基础上二次开发的,原程序对 *图片的...
标签: Web开发
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } /style 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支...
powerpoint自动缩略图效果详解   您相信实现多张图片都能在一个幻灯片上演示吗,一个幻灯片演示文稿吗? 单击自动缩放效果,单击恢复再一次。方法是: 新演示文稿,单击"插入"菜单中的"对象"命令,选择"Microsoft PowerPoint 演示文稿",在插入的演示演示文稿对象中插入网站的图片,将图片的...
标签: Web开发
关于新发布的IE8Beta1,网友们都纷纷下载来使用,尝到了功能强大的甜头;有的却因网络流传:安装后会覆盖原来的IE7,并且不能导入IE7的收藏夹的虚假消息。而使大家(特别是工作用的电脑)不敢尝试这新版的浏览器。 其实,IE8是支持和IE7共存的,而且还有两种方法。并且能导入IE7的收藏夹。 笔者是程序设计师,有时也兼页面的CSS构...
标签: Web开发
本人专业是做UI的,写CSS已经有好几年了,目前刚刚在博客发布关于CSS的文章,欢迎有问题的朋友在有问必答论坛提问,我一定尽力解答。 1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使...

经验教程

978

收藏

93

精华推荐

在XP中自定义文件缩略图大小

在XP中自定义文件缩略图大小

没事儿上个网

Word缩略图的作用

Word缩略图的作用

痘痘是逗比

区分IE6,IE7和firefox的CSS hack

区分IE6,IE7和firefox的CSS hack

寻找不同的人生

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部