如何将图像变成圆形？引导3 [英] How to turn images into circle shape? Bootstrap 3

问题描述

我使用Bootstrap 3，并且已将我的图片设置为具有如下所示的圆形：

I'm using Bootstrap 3, and have set my images to have a circle shape like so:

但是，图像更多地出现在椭圆形状（见截图）。我没有看到任何东西在基础Bootstrap CSS，我需要调整。我看了几个关于这个主题的教程，没有人提到任何额外的调整。此外，我已编辑图像的大小无效。我做错了什么？

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?

 <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%;
}

推荐答案

图片必须是正方形，才能造型使其成为一个完美的圆形。 （示例）

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='..' />

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

The following bootstrap styling is applied to the img-circle element:

.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.

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

You might be interested in the following question: How does this CSS produce a circle?.

这篇关于如何将图像变成圆形？引导3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！