前言
我們知道響應式布局中，元素的寬度可以隨著瀏覽器窗口的寬度變化而變化，這時候元素只是寬度變化，高度通常情況下是不會隨著變的，當內容高度有變化的時候，高度會隨著內容而變化。
但有時候，我們需要元素的寬高比始終保持一致，這就麻煩了，有人說了，這肯定需要js來實時根據(jù)寬度計算高度，也就是注冊window.onresize事件。然而，布局屬于表現(xiàn)，讓JS介入總覺得還是不甘心。
又有人說了，可以用ele {height: calc(width * 0.75)}來實現(xiàn)，假定需要保持4:3的比例。但是這段代碼根本就不執(zhí)行，根本就是錯誤的知識。
現(xiàn)在有一個簡單的辦法，和一個復雜的方法，可以實現(xiàn)這種需求。
padding-bottom: xx%大法
我們最終的要求很簡單，就是寬高比鎖定。雖然，并沒有一種直接的css方法能幫你根據(jù)寬度值實時計算高度值，但是有一個屬性接近這種需求，就是padding-bottom。
先看這個手冊：http://www.runoob.com/cssref/pr-padding-bottom.html
% 定義基于父元素寬度的百分比下內邊距。此值不會如預期地那樣工作于所有的瀏覽器中。
先不考慮“此值不會如預期地那樣工作于所有的瀏覽器中。”，因為現(xiàn)在任意一個瀏覽器都可以如預期的工作。padding-bottom的確實現(xiàn)了讓元素的容器高度由元素的容器寬度決定。
現(xiàn)在我們的解決辦法就是：
<body>
<style>
.inner {
height: 0;
padding-bottom: 25%;
overflow: hidden;
background-color: red;
}
</style>
<div style="width: 50%;">
<div class="inner">
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
測試<br>
</div>
</div>
</body>
現(xiàn)在，你可以調整你的瀏覽器的界面邊界，拉大或者拉小，看看內部容器是不是始終在保持寬高比。
我推薦這種padding-bottom: xx%;大法。
底圖大法
這種解決方案就是依靠一個img元素來負責撐起容器元素，img是媒體元素，它的特點是自帶寬高，可以設置width: 100%; height: auto，這個時候auto的確會自動計算。
所以我們整體方案就是以img撐起元素，然后其他的元素設成absolute，寬高都是100%，就可以實現(xiàn)其他元素的即使有響應式變化也依然保持寬高比。
假設我們有一個可以自適應寬度的容器，如下。它必須是relative，且高度為auto。
<div class="col">
</div>
接著我們給它加入一個img元素，設一些style，注意，display: block非常重要，必須設置。
<div class="col">
<img style="display:block; width: 100%; height: auto;">
</div>
然后關鍵的問題就是這個圖片是個啥。最佳的選擇是，比如你要保持4:3的比例，元素大體上在400x300px的大小上，可大可小，那么你需要用ps做一張400x300px、png8的透明圖片先。
做好之后，找一個圖片轉dataurl的工具，比如我隨便找了一個http://www.mycodes.net/170/8897.htm ，這個就夠用了。將我們做的圖片轉換成dataurl。如果你的網(wǎng)站需要考慮IE8和以下的瀏覽器訪問，那么就存成一個實體圖片然后引用就行了。
然后就是設置你真正的內容了：
<div class="col">
<img style="display: block; width: 100%; height: auto;">
<div style="position: absolute; top: 0; width: 100%; height: 100%;">
......
</div>
</div>
也就是說，img負責保持外層容器的寬高比，然后里面的div也充滿容器，這樣大家就都符合4:3的比例了。就算視口有變化，也一樣能保持。
