如何在响应式设计中保持比例？

Question

在 jsfiddle 上查看代码

我有几个圆圈包含在一个容器 div 中。我使用百分比，因为我希望圆圈保持响应，并根据屏幕大小放大。我还希望这些圆圈保持圆形，而不像当前调整窗口大小时变成椭圆形。显然，这是由于屏幕宽度和高度很少相等，而且我选择了百分比高度和宽度，这正是我应该得到的。

但是，如何获得在不同屏幕大小下保持圆形的响应式圆圈呢？

.circle {
    margin: 5%;
    display: inline-block;
    width: 30%;
    height: 30%;
    background: #000;
    border-radius: 50%;
    position: relative;
}

- Tomatoes

---

@codehorse 感谢您的评论，但那不起作用，因为我们不再使用响应式设计，而是使用像素。请参见此处的问题 http://jsfiddle.net/NTb7q/1/ - Tomatoes

除此之外，它们是圆形，因为有边框半径。如果我调整边框半径，我会得到其他形状，但不是圆形，而我希望在所有屏幕尺寸下都是圆形。 - Tomatoes

尝试另一种解决方案：https://dev59.com/Lmcs5IYBdhLWcg3wUCYI#14013200 - RichTea

@codehorse 理论上你是对的，但前提是你的元素有方形尺寸。否则，极限将是最短的一边 :) - Ria Weyprecht

请查看此链接 - https://dev59.com/t2035IYBdhLWcg3wZvFg - Vikram Rao

Answer 1

我已经更新了您的示例，提供非 JS 解决方案。- http://jsfiddle.net/D6pjd/23/

基本上是修改了HTML如下（仅展示部分）-

<div class="circles">
  <div class="circle-container">
      <div class="dummy"></div>
      <div class="circle">
        <span class="circle1"></span>
      </div>
  </div>
...
...
</div>

并且CSS的更改 -

.circle-container {
    margin: 20px;
    display: inline-block;
    position: relative;
    width: 30%;    
}

.dummy {
    padding-top: 100%; 
}

.circle {
    margin: 5%;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: #000;
    border-radius: 50%;
}

基于此- 高度等于动态宽度（CSS流式布局） 编辑：更新了示例，只保留了每行两个圆形。

- Vikram Rao

---

使用这个解决方案，您可以获得3个对齐的圆形。 - web-tiki

更新以保持每行只有两个圆形。 - Vikram Rao

Answer 2

基于这篇文章的答案

你需要为每个圆形制作一个1:1的容器。感谢Nathan Ryan提出了CSS解决方案。 他给出了4:3纵横比的解决方案，但对于你的问题，你需要一个1:1纵横比。这就是为什么你需要将margin-top:75%;改为margin-top:100%;以适应你的容器.circle

Fiddle

HTML代码：

  <div class="circles">  
      <div class="circle_container">
          <div class="circle">
            <span class="circle1"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle2"></span>
          </div>
      </div> 
      <div class="circle_container">
          <div class="circle">
            <span class="circle3"></span>
          </div>
      </div>    
      <div class="circle_container">
         <div class="circle">
            <span class="circle4"></span>
          </div>
      </div>
      <div class="circle_container">
          <div class="circle">
            <span class="circle5"></span>
          </div>
      </div>  
      <div class="circle_container">
          <div class="circle">
            <span class="circle6"></span>
          </div>
      </div>
</div>

CSS:

html, body {
    background: pink;
    font-family: 'Helvetica Neue' sans-serif;
    font-size:100%;
}
.circle_container{
    float:left;
    position: relative;
    width: 30%;
    margin:10%;
}
.circle {
    margin-top: 100%
}

.circle1, .circle2,.circle3,.circle4,.circle5,.circle6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    border-radius: 50%;
}

将容器设置为float:left;而不是display:inline-block，可以避免圆之间的“空白”，并且您可以完全控制圆的宽度和边距。

- web-tiki