css容器长宽比（用padding-top来控制高度）

div上设置一个自定义属性，值为长宽比，假设为4:3。

容器宽度width设为100%，高度height先设为0；（因为是用padding-top来控制高度的）
接着通过属性选择器，当自定义属性值为比如4:3的时候，padding-top就是 100% × 3/4 = 75%

 <div class="aa" data-ratio="4:3"></div>.

.aa {
    position: relative;  /*因为容器所有子元素需要绝对定位*/
    height: 0;  /*容器高度是由padding来控制，盒模型原理告诉你一切*/
    width: 100%;
}
.aa[data-ratio="16:9"] {
   padding-top: 56.25%; /* 100%*(9/16)  */
}
.aa[data-ratio="4:3"] {
   padding-top: 75%;
}