高度等于宽度html,CSS实现高度等于宽度自适应（非JS）

在自适应网页布局中，特别是在移动端，我们偶尔会需要某一元素宽高等比例自适应，方形图片最为常见。若只是单纯在移动端表现，宽高样式统一使用相同vw单位就可以实现等比例自适应，而需要考虑多终端时，如果不考虑使用JS运算，还可以用如下代码实现：

#container {

width: 80%;

height: 500px;

}

.attr {

width: 50%;

height: 0;

padding-bottom: 50%;

background-color: #008b57;

}

或者：

.img-div {

position: relative;

width: 100%;

height: 0;

padding-bottom: 100%;

}

img {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

}

    

从以上两段代码原理不难看出共同点，样式都利用了padding-bottom百分比值是相对父元素的宽度来算这个知识点，不得不说这样处理也是十分巧妙。