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%;
}

Codepen：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;。

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

1 个答案: