【CSS小技巧】 用 CSS 實現一個寬高等比自適應容器
不知道怎麽起個標題能更加清楚的說清楚我的意圖，那就打個比方吧：比如我們在手機端上放一張寬度 100% 的圖片，我們如果不設置圖片的高度，那麽這個圖片會根據圖片的原始尺寸等比縮放。今天我們要講的就是實現這麽一個類似於圖片等比縮放的容器。
實現原理
了解了意圖後我們就稍微講一下實現原理。原理很簡單，我們只要根據元素的寬度，為元素設置一個相應比例的高度就可以了。
vw 視口單位(viewport units) 實現
我們知道視口單位(viewport units)是相對於視口(viewport) 尺寸而言的。 100vw 等於視口寬度的 100% ，1vw 相對於等於視口寬度的 1%。那麽這個特性特別適合在移動端實現寬高等比自適應容器。
比如我們還是實現一張寬度 100% 的圖片。這樣就很久簡單了：
HTML 代碼:
<div class="container"> <img alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" /> </div>
CSS 代碼:
*{margin:0;padding:0} .container{ width:100%;height:36.5vw } .container img{ width:100%; }
.container 中 height:36.5vw 是 圖片的原始尺寸（800*292）的寬高比例，即 292/800=36.5%。
這個方法相對於圖片等比縮放特性有個優點就是，無論圖片是否加載完成，容器的高度始終在那裏，不會造成頁面抖動而影響用戶體驗，還有不會造成頁面重繪提升性能。
當然在實際使用過程要考慮容器的 margin，padding 等因素，所以計算高度比例時估計需要 calc() 函數配合稍微多點計算。目前 vw，vh 等視口單位(viewport units)的瀏覽器支持情況應該很好了，但是你如果你要支持老的手機，那這個方法肯定就不適用了。
用子元素的 padding 屬性實現
這是一個比較完美的解決方案，但是首先我們要明白一件事情：子元素的 padding 屬性百分比的值是相對於父容器的寬度而言的。明白這一點特別重要，如圖：
父元素 .container 寬度為 200px。子元素 .content 的 padding:10% , 者 .content 的 padding 計算出來是 20px。
回到正題，我們來看上面例子的解決方案：
HTML 代碼:
<div class="container"> <div class="content"> <img alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" /> </div> </div>
CSS 代碼:
.container{ width:100%; } .content{ overflow: hidden; height: 0; padding-bottom: 36.5%; } .container .content img{ width:100%; }
.content 中 padding-bottom: 36.5%; 是 圖片的原始尺寸（800*292）的寬高比例，即 292/800=36.5%。這裏特別需要註意的是 .content 中 height: 0; 屬性，沒有 height: 0; 配合，你可能會得到意想不到的結果。
這裏我特地把 *{margin:0;padding:0} 充值樣式刪除了，說明這個解決方案能最大限度的避免其他因素的影響。純粹的進行寬高比例計算就可以了。而且這個解決方案沒有瀏覽器兼容性問題。當然IE5.5除外（估計你都沒見過IE5.5或者IE6長什麽樣，暴露年齡了）。
你可以縮放 demo 頁面的瀏覽器尺寸試試，該容器始終保持相同的比例。
【CSS小技巧】 用 CSS 實現一個寬高等比自適應容器