利用CSS样式:max-width实现图片等比例缩放技巧

在制作网页时，常常会出现，文章内容里插入的图片尺寸过大，从而撑开网页布局或者超出部分被隐藏。

爱油菜教育资源网之前有分享过几篇关于利用JS来实现，图片按指定宽度或者高度等比例缩放的代码，点击查看。

这里则分享的是纯CSS的方法实现这个效果：

例：

网页代码：

<div class="article"><img src="images/16css.jpg" /></div>

CSS代码：

.article {width:500px}.article img {max-width:500px}

max-width 就是最大宽度的意思，设置图片最大宽度是500px，图片真实尺寸如果超过500px，就会自动缩放到 500px，高度也会等比例缩放。

但是，有个缺点，IE6不支持 max-width 

解决办法有二：

1、直接忽略万恶的IE6。

2、点击查看另一篇关于 利用CSS样式:max-width实现图片等比例缩放技巧且兼容IE6的方法