壹 ❀ 引
實習生在做產品分類頁時，遇到了一個她不知道如何解決問題，所以來問我應該怎么做；問題其實不難，由於項目使用了bootstrap來實現響應式與自適應，所以除了寬度有明確的百分比值之外(柵格化系統提供的寬)，每個外層容器的高度都是由內容高度來決定的。
那么在產品分類頁時遇到了一個尷尬的問題，后台返回的產品圖片大小不同，導致不同容器被撐起的高度也不同，沒法對齊，如下圖：
所以問題就是，如何讓容器中的不同大小的圖片表現一致，同時在屏幕縮小時還能自適應呢？
貳 ❀ 我的思路與問題的矛盾點
我們都知道，如果想要大小不同的圖片展現一致，最簡單的方法就是給圖片添加相同且明確的寬高(px單位)，雖然圖片可能會變形，但至少寬高能達到一致。
而問題矛盾的地方在於，如果給圖片添加明確的寬高，在頁面縮小時圖片就沒法自適應了，因為定死的寬高沒辦法改變。
我立刻想到了max-height之類的屬性，但很遺憾，由於圖片一開始就大小不同，即便添加類似的屬性，也無法達到初始化圖片相同的效果。
所以我想到先為圖片添加width:100%，height:100%屬性，這樣先滿足圖片自適應；但百分比具有繼承的特性，你要計算當前元素的百分比的實際高度，還得知道父元素多高，而父元素本身也沒高度，難道層層往上設置高度嗎，所以我靈機一動，想到了vw。
叄 ❀ 使用vw解決
我們都知道vw參照的是瀏覽器視窗的寬度，即將視窗寬度平分為100份，看每個容器占視窗寬度的幾份。假設此時是1920分辨率，且瀏覽器全屏，一個容器寬度是192px，那么它占的份數就是192/1920*100=10vw。
不管視窗寬度怎么變化，因為我占的比例是永遠不變的，所以整體布局始終不會亂，從原理角度來說與百分比是一樣的，只是vw參照物始終視窗，而百分比參照的是自己的父元素。
所以這里，我在1920分辨率下(原型圖默認此分辨率)，獲取了一張正常圖片的高度為384px，將高度換算成384/1920*100正好為20vw。
那么問題好解決了，我直接給圖片添加了如下屬性：
img{ width: 100%; height: 20vw; }
這里我之所以寬度可以設置為100%，是因為寬度計算是柵格化系統幫我們計算出的百分比數值。而高度雖然給了明確的數字，但隨着視窗縮小，高度的實際值也是可變的。
我們再來看看效果：
初始圖片表現一致，縮小時也達到了自適應，完全沒有問題。
這並不是一個有難度的問題，只是我在思考時，陷入一個自適應與寬度相等的矛盾中沒能及時跳出來，所以此文用於記錄我的思考過程，順便復習下vw的概念了。
那么本文結束。