在移动页面中有时需要将banner做成与屏幕等宽长宽比例固定的长方性，以获得最佳的视觉体验效果。
banner-1
banner-2
假如我们要实现长宽比例为 2:1 ，移动设备屏幕宽度多种多样，如何用CSS制作自适应的等比例且与屏幕等宽的长方体？
方案一：CSS3 vm单位#####
vw：viewport的宽度，1vw 等于viewport宽度的 1%。
<div class="banner-box"></div>```
.banner-box{
width: 100%;
height:50vw;
}```
使用vw可以简洁地实现，但是此属性的浏览器兼容性不好。
vw浏览器兼容性
方案二：使用padding撑开容器#####
在 CSS 盒模型中，margin, padding 的百分比数值是相对父元素的宽度计算的。由此只需将元素垂直方向的一个 padding 值设定为与 1/2 width 相同的百分比，同时设置height: 0就可以实现目的。但是此方案设置 max-height 无效(max-height作用于元素的内容高度，stackoverflow有更详细的讨论)。
方案三：使用伪元素撑开容器#####
.banner-box{
width: 100%;
overflow: hidden; /*防止伪元素与容器在垂直方向上产生外边距折叠*/
}
.banner-box : after {
content: '';
display: block;
margin-top: 50%; /* margin 百分比相对父元素宽度计算 */
} ```