img 圖片自動適應div的方法

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

1.簡單的做法

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

備註一下這裏的圖片大小爲200x200px

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

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

圖片可能會失真。

2.考慮失真的做法
假如你介意 圖片放大後會失真，我們可以改進上面的代碼，只需要將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%還是依據個人的需求而定，另外在響應式設計中這個問題稍微會複雜一點。