Html 如何将图像变成圆形？引导程序 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22445276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to turn images into circle shape? Bootstrap 3
提问by Ralitza
I'm using Bootstrap 3, and have set my images to have a circle shape like so:
我正在使用 Bootstrap 3，并将我的图像设置为圆形，如下所示：
However, the images are coming out in more of a ellipse shape (see screenshot). I don't see anything in the base Bootstrap CSS that I would need to adjust. I've looked at a couple tutorials on this subject and none of them mention any extra tweaks. Additionally, I've edited the size of the image to no avail. What am I doing wrong?
然而，图像以更多的椭圆形状出现（见截图）。我在基本 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%;
}
回答by Josh Crozier
An image has to be a square in order for the styling to make it into a perfectly round circle. (example)
图像必须是正方形才能使样式成为完美的圆形。（例子）
<img class='img-circle' src='..' />
The following bootstrap styling is applied to the img-circleelement:
以下引导样式应用于img-circle元素：
.img-circle {
border-radius: 50%;
}
Therefore if the image is rectangular, you will generate an ellipse-like shape. If you want to work around this, you would have to apply a mask over the image. Alternatively, you could probably also clip it.
因此，如果图像是矩形的，您将生成类似椭圆的形状。如果要解决此问题，则必须在图像上应用蒙版。或者，您也可以剪辑它。
You might be interested in the following question: How does this CSS produce a circle?.
您可能对以下问题感兴趣：这个 CSS 如何生成一个圆？.
