css设置高度等于其宽度

标准

1、使用padding-bottom的百分比值是相对包含块的宽度的知识点 ,如:

<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>

2、或使用js方法

$(document).ready(function(){
    $('#box1').css('height',$('#box1').css('width'));
})

参考:https://segmentfault.com/q/1010000002629233

发表评论

电子邮件地址不会被公开。 必填项已用*标注

87 + = 94