乌徒帮技术范儿技术中心CSS样式表 › css按照比例缩小图片:实现缩略图的办法

css按照比例缩小图片:实现缩略图的办法

分类:CSS样式表

先上css代码:

.content img{max-width:50px;max-height:50px;}
*html.content img{width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);}

如果你深谙css及各版本浏览器的习性,应该能搞清楚上面代码的亮点。

把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。

对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。

<script type=”text/javascript”>// <![CDATA[
functionresizeImage(obj){
obj.width=obj.width>50&#038;&#038;obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
// ]]></script>

这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是 Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。

最终,把一副大图片按比例缩小到50px*50px以内,可以参照以文章开头这段CSS。为了方便,避免重复,我们甚至可以直接将css写到一个标签样式里,即如下,写在一起。

max-width:150px;
height:auto;
max-height:150px;
width:auto;
width:expression(this.width>150&&this.width>this.height?150:auto);
height:expresion(this.height>150?150:auto);

而用图则可以表示为如下图片。如果你用wordpress建站,搭配auto-highslide插件,就能实现本站文章内图片的放大缩小效果了,有兴趣就试试吧!

参考:http://www.kekaku.com/wd/cssxhtml/132

不过,在wordpress里你完全不用为此操心,因为wordpress本身已经带了图片大小控制功能,在后台“设置》媒体”中有一项为:最大嵌入对象大小,它的功能就是将文章中的图片按照设定的最大尺寸来放置,即图片超过你设置的长度或宽度时,按照比例缩小图片。本站的设置如下:

wordpress图片最大宽度设置

填写个人信息,赶快回复吧!