用object-fit和object-position來處理圖片
半深入理解CSS3 object-position/object-fit屬性
用百分比設置圖片寬高
方式一：width：100% height：100%
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%
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%還是依據個人的需求而定