CSS实现固定比例的长方形

在移动页面中有时需要将banner做成与屏幕等宽长宽比例固定的长方性，以获得最佳的视觉体验效果。

banner-1

banner-2

假如我们要实现长宽比例为 2:1 ，移动设备屏幕宽度多种多样，如何用CSS制作自适应的等比例且与屏幕等宽的长方体？

方案一：CSS3 vm单位#####

vw：viewport的宽度，1vw 等于viewport宽度的 1%。

```

.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 百分比相对父元素宽度计算 */
} ```