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

Question

我画了一个圆圈，但我希望它在缩小时保持 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%;
}

代码笔：https://codepen.io/drhectapus/pen/aWMgZx

Answer 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;。

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

Responsive circle that maintains aspect ratio when shrunk

css

resize

responsive-design

responsive