在移動頁面中有時需要將banner做成與屏幕等寬長寬比例固定的長方性，以獲得最佳的視覺體驗效果。

banner-1

banner-2

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

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

<div class="banner-box"></div>```

.banner-box{
width: 100%;
height:50vw;
}```
使用vw可以簡潔地實現(xiàn)，但是此屬性的瀏覽器兼容性不好。

vw瀏覽器兼容性

方案二：使用padding撐開容器#####

在 CSS 盒模型中，margin, padding 的百分比數(shù)值是相對父元素的寬度計算的。由此只需將元素垂直方向的一個 padding 值設(shè)定為與 1/2 width 相同的百分比，同時設(shè)置height: 0就可以實現(xiàn)目的。但是此方案設(shè)置 max-height 無效(max-height作用于元素的內(nèi)容高度，stackoverflow有更詳細的討論)。

方案三：使用偽元素撐開容器#####

.banner-box{
    width: 100%;
    overflow: hidden; /*防止偽元素與容器在垂直方向上產(chǎn)生外邊距折疊*/
}

.banner-box : after {
    content: '';
    display: block;
    margin-top: 50%; /* margin 百分比相對父元素寬度計算 */
} ```