如何将图像转换为圆形？ 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%;
}

Answer 1

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

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

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

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

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

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