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的值即可實現高度為寬度的百分之多少。