寫頁面的時候經常會遇到需要圖片 自適應 容器大小這樣的情況：
<style>
div{width:400px;height:400px;border:1px solid #000; }
img{width:100%;height:100%;}
</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%）
}
將以上標簽加入之后保存，再用手機打開即是自適應網頁了。