css讓圖片自適應容器（div）大小

我們在寫頁面的時候經常會遇到需要圖片 自適應 容器大小這樣的情況，下面我就開門見山的說明一下怎樣去實現這樣一個效果。

<div>        <img src="1.jpg" alt=""></div>

1 2 3

備忘一下這裡的圖片大小為200x200px

div {    width: 400px;    height: 400px;    border: 1px solid #000;    }img {    width: 100%;    height: 100%;}

1 2 3 4 5 6 7 8 9

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

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

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

1 2 3 4

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又或者是具體的百分比去設定圖片在容器中所佔比例的大小。這裡就不詳細介紹了，有興趣可以到w3school裡瞭解下。想瞭解圖片在div中垂直置中自適應的朋友輕戳下方連結↓

所有部落格已轉移至個人部落格：www.clramw.top

相關文章推薦：

圖片在容器中垂直置中自適應

熱門文章：清除浮動float的七種方法總結和相容性處理