2016-12-21
网页设计时，我们经常会遇到文章图片过宽，把页面撑变形的情况，除了手工剪裁之外，有没有更简单的方法呢?有，下面我们就提供基于CSS的三种控制方法：
开始种CSS控制样式：
#content img{width: 450px;height:450px;}
如果限制一个800*600的图片，那依然是显示为450*450，如果不确定全部都是正方形的图片，该方法有待商榷。
第二种CSS控制样式：
#content img{
max-width: 450px;
height:auto;
width:expression(this.width > 450 ? "450px" : this.width);
}
宽度width的大值为450px，而高度height则随着宽度的变化而变化，保持原图比例，推荐使用这种方法。
第三种CSS控制样式：
img,a img{border:none;max-width:95%;}
img,a img定义图片，和有链接的图片;border:none;没有边框，如果去掉该定义，现象就是带有链接的图片会有一个蓝色的边框，就像如果不定义文字链接的样式浏览器会默认显示一条蓝色的下划线;接下来max-width:95%;这是本文的关键，意思是图片的大宽度为该图片所处容器的95%，当然这个数字具体你可以修改，好不超过90%+否则也就没有达到自动控制图片尺寸的意义了
