我們在寫頁面的時候經常會遇到需要圖片自適應容器大小這樣的情況，下面我就開門見山的說明一下怎樣去實現這樣一個效果。
1.簡單的做法
|
1
2
3
4
5
|
<div>
<img src="1.jpg" alt="">
</div>
|
備注一下這里的圖片大小為200x200px
|
1
2
3
4
5
6
7
8
9
10
11
|
div {
width: 400px;
height: 400px;
border: 1px solid #000;
}
img {
width: 100%;
height: 100%;
}
|
不管容器有多大，只要將img的寬高設置成100%（這里的100%是相對於父級寬高而言）就能自適應容器大小。
那是不是就這這么簡單完事兒了呢？如果你不介意圖片被放大后可能出現失真的話也的確是這樣就ok了。
2.考慮失真的做法
假如你介意 圖片放大后會失真，我們可以改進上面的代碼，只需要將img的樣式簡單修改
|
1
2
3
4
5
6
|
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標簽引入的圖片，可以使用延遲加載的方式來加載，在實際加載圖片之前先用js檢查窗口寬度，然后加載不同分辨率的圖片，比如寬度<=480,就加載80px寬度的圖片，480 < 寬度 <= 768，加載120px的圖片， 寬度> 768則加載160px的圖片，如果寬度是600px怎么辦呢，通過百分比來縮放120px的圖片達到合適的結果。
這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁加載的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。
我覺得響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。
假如你的img是作為background使用的就需要通過background-size: cover/contain又或者是具體的百分比去設置圖片在容器中所占比例的大小。
另外HTML5有個新特性，通過 srcset + size 屬性以及w 標識符，能夠解決響應式圖片切換的問題，同時向下兼容所有屏幕尺寸，無需額外JS/CSS，適配各種屏幕（各種device pixel ratio，屏幕尺寸）。雖然兼容性一般，但肯定是將來的趨勢。經測試，貌似最新的 iOS 8.4.1 也支持這個新屬性了！
代碼如下
|
1
2
3
4
5
|
<img class="image" src="mm-width-128px.jpg"
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">
|
代碼雖然不好看，但是比其他的省事多了。此方法特別適合用於 cms 中，不破壞原意，同時也適合大量圖片的情況。想要研究srcset去張鑫旭大神的博客學習學習，這里就不詳細介紹了。
轉自：http://www.clramw.top/?p=129