保持高度和宽度相等，同时在具有不同高度和宽度的<div>中响应</div>

Question

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

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

它坐在一个div：

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

很明显，圆圈不会成为一个圆圈，因为我的宽度和高度基于百分比，但是它周围的容器有不同的宽度和高度。有没有办法让圆圈具有相同的尺寸，或者我必须做数学才能弄明白？

Answer 1

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

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

所以基本上你会这样做：

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

JSFiddle：http://jsfiddle.net/Rc9fa/167/

还有一些基于视口的维度，例如vh，vmin和vmax，以获取完整列表和说明请参阅此处的文档：{ {3}}