基本原理

元素的padding的百分比值是基於其父元素的寬度計算的，如此，設置元素寬度width:25%，元素高度不設定，元素padding-bottom:75%，就可以得到一個高寬比為3:1的盒子。或者，元素的寬高都不設定，設置元素的padding-right: 25%，padding-bottom:75%，也可以得到一個高寬比為3:1的盒子。

使用場景

通常用在圖片寬度自適應，並且需要保持高寬比的地方，例如商品列表頁面。示例代碼如下：

<div class="imgc">
    <img src="...">
 </div>

.imgc {
  width
 
: 100%;
  position: relative;
  padding-top: 75%;
   > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }
}

或者

.imgc {
    padding: 0 50% 66.66% 0;
}

保持寬高比的寬度自適應盒子