如何将图像变成圆形？引导程序 3答案

【问题标题】：How to turn images into circle shape? Bootstrap 3如何将图像变成圆形？引导程序 3
【发布时间】：2014-04-22 02:55:15
【问题描述】：

我正在使用 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%;
}

【问题讨论】：

你试过把图片做成正方形吗？看看this example..
这就是解决方案。一个问题，我在我的 CSS 文件中指定了宽度/高度，但现在图像不再响应。有没有办法在不手动调整每个图像大小的情况下实现这一点？非常感谢！
我个人不知道任何其他方式。为了响应性，而不是像素尝试百分比。
@RalitzaIankova 好的 - 为了完成，我将添加它作为答案。将来有人可能会想知道同样的事情。关于您的问题，只要您仍然指定100% 的max-width，当视口/区域小于尺寸时，它仍然应该是响应式的.. jsfiddle.net/TJWFL .. 你总是可以使用基于百分比的单位。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

图片必须是正方形才能使样式变成完美的圆形。 (example)

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

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

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

因此，如果图像是矩形的，您将生成类似椭圆的形状。如果要解决此问题，则必须在图像上应用蒙版。或者，您也可以剪辑它。

您可能对以下问题感兴趣：How does this CSS produce a circle?。

【讨论】：

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