max-width實現圖片的自適應

在自適應布局中，有時候會讓圖片隨着寬度的變化相應的放大或者縮小，或者說讓圖片等比縮放，但是每個圖片的大小又不一樣，這個時候我們就要用到max-width這個屬性了。

img{

　　max-width:100%;

}

這個屬性直接設置在img標簽上，這時圖片就能縮放了。

但是如果在百分比容器中使用這個屬性，並且要實現所有尺寸不同的圖片顯示相同的大小，並且實現等比縮放，這是單純的在img上設置max-width:100%這個屬性已經不奏效了，看效果：

左右兩邊寬度都是50%，圖片也可以縮放，但是高度不能等高。這時就要統一設置圖片的高寬了，寬度用百分比或者px都可以，高度就要設置為定高了，這是無論圖片大小是否一致，都能實現等高縮放了，效果：

 

css樣式：

img {

    max-width: 100%;

    width: 100%;

    height: 140px;

}