如何将图片变成圆形？Bootstrap 3

Question

我正在使用Bootstrap 3，并将我的图片设置为圆形，如下所示：

但是，实际上图片呈现出来更像是椭圆形状（请参见截图）。我没有看到需要调整的基本Bootstrap CSS任何内容。我查看了一些关于此主题的教程，但都没有提到额外调整。此外，我已经尝试编辑图像的大小，但没有效果。我做错了什么？

 <div class='container'>
    <div class='row'>
      <div class='col-md-4'>
        <img class='img-circle' src='img/family2.png' />
        <h2>One</h2>
        <p>Lorem ispum</p>
      </div>

      <div class='col-md-4'>
        <img class='img-circle' src='img/fruit2.jpg' />
        <h2>Two</h2>
        <p>Lorem ispum</p>
      </div>

      <div class='col-md-4'>
        <img class='img-circle' src='img/fruit2.jpg' />
        <h2>Three</h2>
        <p>Lorem ispum</p>
      </div>
    </div>
  </div>

img {
  display: block;
  height: auto;
  max-width: 100%;
}

- Ralitza

---

你尝试过将图像变成正方形吗？可以参考这个例子。 - Josh Crozier

那就是解决方案。有一个问题，我在CSS文件中指定了宽度/高度，但现在图片不再具有响应性。有没有一种方法可以在不手动调整每个图像的情况下实现这一点？非常感谢！ - Ralitza

我个人不知道其他的方法。为了响应性，可以尝试使用百分比而非像素。 - Idris

@RalitzaIankova 好的- 我将其添加为答案以便完整性。未来可能有人会想同样的问题。关于您的问题，只要仍然指定max-width为100％，在视口/区域小于尺寸时它仍应具有响应性。http://jsfiddle.net/TJWFL/ .. 您始终可以使用基于百分比的单位。 - Josh Crozier

Answer 1

为了将图像样式呈现为完美的圆形，图像必须是正方形。(示例)

<img class='img-circle' src='..' />

以下Bootstrap样式应用于img-circle元素：

.img-circle {
    border-radius: 50%;
}

因此，如果图像是矩形的，则会生成类似椭圆形状。如果你想解决这个问题，你需要在图像上应用蒙版。或者，你也可以将其剪辑。您可能会对以下问题感兴趣：如何使用CSS创建圆形？。

- Josh Crozier

---

感谢您的跟进。我会查看另一个线程的。 :) - Ralitza