max-width实现图片的自适应

在自适应布局中，有时候会让图片随着宽度的变化相应的放大或者缩小，或者说让图片等比缩放，但是每个图片的大小又不一样，这个时候我们就要用到max-width这个属性了。

img{

　　max-width:100%;

}

这个属性直接设置在img标签上，这时图片就能缩放了。

但是如果在百分比容器中使用这个属性，并且要实现所有尺寸不同的图片显示相同的大小，并且实现等比缩放，这是单纯的在img上设置max-width:100%这个属性已经不奏效了，看效果：

左右两边宽度都是50%，图片也可以缩放，但是高度不能等高。这时就要统一设置图片的高宽了，宽度用百分比或者px都可以，高度就要设置为定高了，这是无论图片大小是否一致，都能实现等高缩放了，效果：

css样式：

img {

    max-width: 100%;

    width: 100%;

    height: 140px;

}