缩小HTML图片,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事件。

这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对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插件，就能实现本站文章内图片的放大缩小效果了，有兴趣就试试吧！

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