【问题标题】: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 单位固定宽度和高度可保留圆形纵横比,但会破坏水平对齐。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-03-04
    • 1970-01-01
    • 1970-01-01
    • 2021-11-26
    • 2012-08-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多