後臺返回的產品圖片大小不同，導致不同容器被撐起的高度也不同，沒法對齊，如下圖：

所以問題就是，如何讓容器中的不同大小的圖片表現一致，同時在螢幕縮小時還能自適應呢？

VW：vw參照的是瀏覽器視窗的寬度，即將視窗寬度平分為100份，看每個容器佔視窗寬度的幾份。假設此時是1920解析度，且瀏覽器全屏，一個容器寬度是192px，那麼它佔的份數就是192/1920*100=10vw。

不管視窗寬度怎麼變化，因為我佔的比例是永遠不變的，所以整體佈局始終不會亂，從原理角度來說與百分比是一樣的，只是vw參照物始終視窗，而百分比參照的是自己的父元素。

所以這裡，我在1920解析度下(原型圖預設此解析度)，獲取了一張正常圖片的高度為384px，將高度換算成384/1920*100正好為20vw。

那麼問題好解決了，我直接給圖片添加了如下屬性：

img{
    width: 100%;
    height: 20vw;
}

這裡我之所以寬度可以設定為100%，是因為寬度計算是柵格化系統幫我們計算出的百分比數值。而高度雖然給了明確的數字，但隨著視窗縮小，高度的實際值也是可變的。

初始圖片表現一致，縮小時也達到了自適應，完全沒有問題。

本文內容來自：https://home.cnblogs.com/u/echolun/

https://www.cnblogs.com/echolun/p/11354416.html