不知道怎麼起個标題能更加清楚的說清楚我的意圖，那就打個比方吧：比如我們在手機端上方一張寬度 100% 的圖檔，我們如果不設定圖檔的高度，那麼這個圖檔會根據圖檔的原始尺寸等比縮放。今天我們要講的就是實作這麼一個類似于圖檔等比縮放的容器。
實作原理
了解了意圖後我們就稍微講一下實作原理。原理很簡單，我們隻要根據元素的寬度，為元素設定一個相應比例的高度就可以了。
vw 視口機關(viewport units) 實作
我們知道視口機關(viewport units)是相對于視口(viewport) 尺寸而言的。 100vw 等于視口寬度的 100% ，1vw 相對于等于視口寬度的 1%。那麼這個特性特别适合在移動端實作寬高等比自适應容器。
比如我們還是實作一張寬度 100% 的圖檔。這樣就很久簡單了：
HTML 代碼:
class="container">
css圖檔等比例縮放_【CSS小技巧】 用 CSS 實作一個寬高等比自适應容器
alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" />
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 代碼:
class="container">
class="content">
css圖檔等比例縮放_【CSS小技巧】 用 CSS 實作一個寬高等比自适應容器
alt="" src="https://newimg88.b0.upaiyun.com/newimg88/2018/12/css-selector.jpg" />
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 頁面的浏覽器尺寸試試，該容器始終保持相同的比例。
同樣的我們也可以做個清單：https://codepen.io/feiwen8772/pen/xmwaxK