固定比例盒子

要创建具有固定比例的一个盒子，所有你需要做的就是给 div 的顶部或底部设置一个 padding：

  1. .container {
  2.   height: 0;
  3.   padding-bottom: 20%;
  4.   position: relative;
  5. }
  7. .container div {
  8.   border: 2px dashed #ddd;    
  9.   height: 100%;
  10.   left: 0;
  11.   position: absolute;
  12.   top: 0;
  13.   width: 100%;
  14. }

使用 20％ 的 padding-bottom 使得框等于其宽度的 20％ 的高度。与视口宽度无关，子元素的 div 将保持其宽高比（100％/ 20％= 5:1）。

演示