寫頁面的時候經常會遇到需要圖片自適應容器大小這樣的情況：

 1 <style>
 2 
 3 div{
 4        width:400px;
 5        height:400px;
 6        border:1px solid #000;
 7    }
 8 
 9 img{
10        width:100%;
11        height:100%;
12      }
13 
14 </style>

不管容器有多大，只要將img的寬高設定成100%（這裡的100%是相對於父級寬高而言）就能自適應容器大小。

那是不是就這這麼簡單完事兒了呢？如果你不介意圖片被放大後可能出現失真的話也的確是這樣就ok了。
假如你介意圖片放大後會失真，我們可以改進上面的程式碼，只需要將img的樣式簡單修改.

img{
    max-width:100%;
    max-height:100%;
    }

max-width:100%和width:100%的區別在於,max-width是相對於img自身的尺寸而言的。意思是圖片最大寬度為自身尺寸的寬，在這裡就是100px。而width的100%我們上面已經說過了是相對於父級寬度的，所以為了不讓圖片被放大後失真我們可以設定img的最大寬度為自身尺寸大小，更通俗的講就是隻允許縮小不允許放大img。

具體情況中是選擇width:100%還是max-width:100%還是依據個人的需求而定，另外在響應式設計中這個問題稍微會複雜一點。

圖片適應手機端 要控制的是裝圖片的容器寬度

 img{
display: block; //可不加 banner可以用
height: auto;
max-width: 100%; //或者width：100%
}

將以上標籤加入之後儲存，再用手機開啟即是自適應網頁了。