当div的宽度为百分比时，如何设置高与宽相等

今天做了一个demo，其中要用到圆形，首先想到的就是给一个div设置宽等于高，再加上border-radius等于宽的一半就好了

div {

    width: 200px;

    height: 200px;

    border-radius: 100px;

}

但是如果div的宽度是百分比，继承的是父元素的宽度的百分比时，高度该如何设置为等于宽呢？

div {
  width: 20%;
  height: 0; // 设置高为0，让padding撑起高
  padding-bottom: 20%; /* 让div的高等于宽 */
  border-radius: 50%;
}

此时将padding-top/padding-bottom设置为百分比时，是基于父元素宽度，正好和width相等；在使用border-radius=50%，就实现了自适应的圆形。