如何讓div的高度等於寬度

今天在開發時遇到一個問題，如何使高度等於百分比的寬度。原本的想法是通過js獲取，但是這個方法感覺太麻煩，希望能用css做的事情就不要js去做。

完美的方案是通過padding來實現的。

原理

padding的定義:

padding屬性設置一個元素的內邊距，padding 區域指一個元素的內容和其邊界之間的空間，該屬性不能為負值。

取值
<長度>
可指定非負的固定寬度. See <length> for details.
<百分比>
相對於包含塊的寬度

看最后一句話“相對於包含塊的寬度”，意思是padding的百分比基數是包含塊的寬度（父元素的寬度），如果父元素是100px，padding-top: 20%;就相當於padding-top: 20px。

應用

接下來根據這一特性開始實現讓div的高度等於寬度。

假設是一個div占據屏幕中間90%的區域顯示，圖片比例是1:1。

首先畫一個90%寬，比例為1:1的區域

div{
    width: 90%;
    height: 0;
    margin: 0 auto;
    padding-top: 90%;
}

圖片要放置在這個區域，但是發現高度為0，通過絕對定位實現，

div>img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

假設現在的圖片比例是4:3，我們要怎么計算呢 90% / 4 * 3 = 67.5%，其他比例安裝這個公式去計算就好。

下面是完整的代碼和截取的一個小例子：

<div class="banner">
  <img src="xxx.jpg"/>
</div>

.banner{
  width: 90%;
  height: 0;
  margin: 0 auto;
  padding-bottom: 90%; 
  padding-bottom: 67.5%; /*4:3*/
  position: relative;
}
.banner > img{
  position: absolute;
  width: 100%;
  height: 100%;
}