html - 如何将图像变成圆形？ bootstrap 3

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

最佳答案

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

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

以下 bootstrap 样式应用于img-circle元素:

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

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

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

关于html - 如何将图像变成圆形？ bootstrap 3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22445276/