如果一个div的宽度用百分比表示，怎样让这个div的高度=宽度

今天写东西遇到了这样一个问题，一个div的宽度不固定，设置成20%，现在想让这个div变成正方形，高度也设置成20%,不管用！

最后寻找各种方法尝试

方法一：

<div class="circle"> 

</div>

.circle{width: 20%;
padding-top: 100%;
}，因为当一个div的高度没有时，它的padding值设百分数的话，就依据宽度来定，所以padding-top: 100%;就是宽度的值；这样高=宽。

这种方法有一个问题就是div里边的内容就要用绝对定位来写了。

方法二：

可以用js来实现。

//用jQuery
var w=$('.circle').width();
$('.circle').attr('height',w);

//用原生js

var w=document.getElementById("circle").style.width;
document.getElementById("circle").style.height=
document.getElementById("circle").offsetWidth+"px";

转载于:https://www.cnblogs.com/summer-work/p/6511835.html