缩小时保持纵横比的响应圆答案

【问题标题】：Responsive circle that maintains aspect ratio when shrunk缩小时保持纵横比的响应圆
【发布时间】：2017-10-26 15:20:25
【问题描述】：

我画了一个圆圈，但我希望它在缩小时保持 1:1 的纵横比，这样它在移动设备上看起来就不像椭圆了

html:

<div class='container'>
  <div class='circle'></div>
</div>

css:

.container {
  display: flex;
  border: 2px solid black;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 500px;
  height: 500px;
  background-color: red;
  border-radius: 50%;
}

Codepen：https://codepen.io/drhectapus/pen/aWMgZx

【问题讨论】：

标签： css responsive-design resize responsive

【解决方案1】：

使用padding-bottom 纵横比技巧 (read more) 使圆圈保持 1:1 的比例。

.container {
  display: flex;
  border: 2px solid black;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 500px;
  background-color: red;
  border-radius: 50%;
}

.circle::before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

<div class="container">
  <div class="circle"></div>
</div>

或者，您可以以vw（视口宽度）单位指定圆的宽度和高度，以使元素在浏览器调整大小时保持相同的相对宽度和高度 - 例如width: 10vw; height: 10vw;。

【讨论】：

谢谢！您的解决方案是我能找到的唯一一个保留圆纵横比的解决方案，以及圆下方其他元素（在我的情况下为文本）的相对水平对齐方式。以 vw 单位固定宽度和高度可保留圆形纵横比，但会破坏水平对齐。