如何将图像转换为圆形？Bootstrap 3

我正在使用Bootstrap 3,并将我的图像设置为圆形,如下所示:

然而,图像更像椭圆形状(见截图).我没有在基本的Bootstrap CSS中看到任何我需要调整的东西.我看了几个关于这个主题的教程,但没有一个提到任何额外的调整.另外,我编辑了图像的大小无济于事.我究竟做错了什么？

 

    

      

        
        
One
        
Lorem ispum
      

      

        
        
Two
        
Lorem ispum
      

      

        
        
Three
        
Lorem ispum
      
    
  

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

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

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

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

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

您可能对以下问题感兴趣:这个CSS如何产生一个圆圈？.