css设置高度为宽度的百分之多少

html

    <div class="banner">
        <div>

        </div>
    </div>

css

.banner{
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}

.banner div{
    background: red;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

巧妙的实现了高度百分之百。更改padding-bottom的值即可实现高度为宽度的百分之多少。