css--圖片自適應
阿新 • • 發佈：2020-11-28
我們在寫頁面的時候經常會遇到需要圖片自適應容器大小這樣的情況，下面說明一下怎樣去實現這樣一個效果。
<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%是相對於父級寬高而言）就能自適應容器大小。 那是不是就這這麼簡單完事兒了呢？如果你不介意圖片被放大後可能出現失真的話也的確是這樣就ok了。
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%還是依據個人的需求而定，另外在響應式設計中這個問題稍微會複雜一點。