CSS限制图片最大宽度按比例自动缩放解决方法

发布时间:2020-03-02编辑:脚本学堂
网页设计的时候,要对一个区域里可能出现的图片的宽度进行限制,不然它可能会把页面撑得变形。请参考下本文的解决方法。

在css制作中,限制图片最大宽度,及按比例绽放图片时,采用固定宽度,长度来设置的话,比如在
<img height="200px" width="200px">
中设置,或者是在CSS中用
.img {height:200px;width:200px;}
来控制的话,不同规格的图片有可能会变形。这是一种最不好的解决方法。经过实践,找到一些CSS代码,可以让图片在超过规定的宽度时,自动缩小,并且是按比例缩小,不会造成图片
变形。如下:
 

复制代码 代码示例:
.img{
max-width: 200px;
height:auto;
width:expression(this.width > 200 ? "200px" : this.width);
}

经过测试,以上CSS代码能兼容IE6 IE7 FF,这种方法还是不错的。