当宽度不定时，如何设置div的宽高相同？

在做项目时， 我经常会遇到这样一种情况：在一个div里渲染一个正方形或圆形的物体， 这个物体是占满整个div的，而这个div的宽度会随着父元素的宽度变化而变化。为了让这个物体的效果不变形，必须保持div的长度和宽度一致，那么怎么做呢？

保持div长宽相等的方法：

div{
  width: 100%;
  padding-top: 100%;     //padding-bottom: 100%;也可以
}

上面的代码就可以令div的长宽相等。原理是什么呢？

我们先来看一下padding-top的取值：

取值	描述
length	规定以具体单位计的固定的上内边距值，比如像素、厘米等。默认值是 0px。
%	定义基于父元素宽度的百分比上内边距。
inherit	规定应该从父元素继承上内边距。

 

从上面的表中， 可以看到当padding-top的取值为百分比的时候，这个百分比是相对于父元素的宽度，因此当设置div的样式padding-top: 100%;也就将div的高度撑高到和宽度相等。

如果想要在这个div里面放子元素，可以将该div设置position:relative， 子元素设置为position:absulute; left:0; top:0 。如果想要子元素的宽高相等，只需要再设置子元素的样式为：width:100%; height;100%。

 

 

参考文章：https://segmentfault.com/q/1010000012593573