Css 保持高度和宽度相等，同时以不同高度和宽度响应

基本上我想在css中创建一个圆。我的圆圈代码是：

.circle{
  border-radius:50%;
  width:20%;
  height:20%;
}  

它坐在一个小隔间里：

.banner{
  width:100%;
  height:13em;
}

---

显然，这个圆不会是一个圆，因为我有它的宽度和高度百分比，但它周围的容器有不同的宽度和高度。有没有办法使圆具有相同的尺寸，或者我需要做数学运算才能计算出来？

您可以使用视口百分比长度vw。它是一个有效的css维度，如像素的px或当前字体大小的em

由于vw指的是视口的宽度，因此使用20vw表示宽度或高度或任何其他属性都不会产生任何差异，它将始终具有相同的值

所以基本上你会做：

.circle{
    border-radius:50%;
    width:20vw;
    height:20vw;
}

JSFiddle：

---

还有一些基于视口的维度，如vh、vmin和vmax，有关完整的列表和说明，请参见此处的文档：

如果可能，共享一些标记或小提琴。这正是我要找的。非常感谢！