容器高度随宽度等比例变化

 

<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}

</style>

<div id='container'>
    <div class='attr'></div>
</div>

 

参考资料：https://segmentfault.com/a/1190000006631310