非固定宽高百分比布局设置宽高比纯CSS

最近遇到个小问题一直不知道怎么解决,就是如何在百分比布局中高度用宽度的百分比.即:<div class='demo'></div> .demo{ width: 100%; height: auto; } 这种时候height是根据本身高度自动调整的,那么如何做到height和width成比呢?接下来就要介绍下百分比布局的一些细节了:所谓的padding-bottom:100%中百分比是按宽度来算的而不是高度,故可以借此来实现百分比布局宽高成比例.如下:<div class='demo'></div> .demo{ width: 100%; padding-bottom: 100%; }