Bootstrap 3：使用 img-circle，如何从非方形图像中获取圆形？答案

【问题标题】：Bootstrap 3: Using img-circle, how to get circle from non-square image?Bootstrap 3：使用 img-circle，如何从非方形图像中获取圆形？
【发布时间】：2014-02-18 11:54:41
【问题描述】：

我有矩形，不一定是方形图片。

Using Bootstrap's img-circle，我想对这些矩形图像进行圆形裁剪，不是椭圆/非圆形裁剪。

如何做到这一点？作物应该以img-responsive 的方式表现并且应该居中。

JSFiddle to illustrate the non-circular behavior of non-square img-circle images.

<div class="container-fluid text-center">
    <div class="row">
        <div class="col-xs-12">img-circle test</div>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/200/200" />
        </div>
        <div class="col-xs-6">
            <img class="img-responsive img-circle" src="http://placekitten.com/g/200/200" />
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/200/400" />
        </div>
        <div class="col-xs-6">
            <img class="img-responsive img-circle" src="http://placekitten.com/g/200/400" />
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <img class="img-responsive" src="http://placekitten.com/g/400/200" />
        </div>
        <div class="col-xs-6">
            <img class="img-responsive img-circle" src="http://placekitten.com/g/400/200" />
        </div>
    </div>

</div>

【问题讨论】：

记得在 SO 中包含你的 JSFiddle 代码（至少是最重要的部分），以避免链接断开或网站关闭时出现问题。

标签： css twitter-bootstrap-3

【解决方案1】：

我看到这篇文章有点过时了，但仍然...... 我可以向您和其他所有人（与我今天处于相同情况的人）展示我是如何做到的。

首先，你需要这样的html：

<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>

你的 css 类看起来像这样：

div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;

/* make it a circle */
border-radius:50%;

/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;

/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;

/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

它是响应式圆圈，以原始图像为中心。如果需要，您可以更改 width 和 height 不自动填充其父级。但是，如果您想在结果中有一个圆圈，请保持它们相等。

与fiddle上的解决方案链接

我希望这个答案能帮助苦苦挣扎的人。再见。

【讨论】：

是的。谢谢，我试了很多次，总是缺少一个部分。这得到了所有这些（响应能力，完美的圆圈，居中）
这是一个很棒的解决方案。
很好的解决方案！谢谢！
很好的解决方案，但不能在 Safari 上运行...任何想法@zds ？
@Micky，看起来它对我有用。我的 Safari 版本是 5.1.4 (7534.54.16)。也请查看stackoverflow.com/questions/16542051/… 的帖子。

【解决方案2】：

我根据使用情况使用这两种方法。 FIDDLE

<div class="img-div">
<img src="http://placekitten.com/g/400/200" />
</div>
<div class="circle-image"></div>

div.img-div{
    height:200px;
    width:200px;
    overflow:hidden;
    border-radius:50%;
}

.img-div img{
    -webkit-transform:translate(-50%);
    margin-left:100px;
}

.circle-image{
    width:200px;
    height:200px;
    border-radius:50%;
    background-image:url("http://placekitten.com/g/200/400");
    display:block;
    background-position-y:25% 
}

【讨论】：

在我的特殊情况下，图像可能有不同的尺寸，不一定是 200px x 400px。是否可以抽象您提供的 CSS 以便它适用于任何图像大小？
是的，当然。只是 div 有这些尺寸。您可以拥有任何尺寸的 div，并且必须对图像进行一些计算。例如，在第一种情况下，我将图像向左平移 50%，向左平移 100px（div 的 50%）边距；使图像居中。您可以将img高度设置为100%；
您要选择正确答案还是仍然有问题？
是的，我仍然遇到问题。我无法抽象出您当前的答案来处理任意大小的图像。我用百分比相对高度和宽度进行了尝试 - 但结果看起来不太好，即图像不是img-responsive，不是圆形或没有以原始图像为中心。也许您还有想法如何满足这些要求？
首先你所说的img-responsive是什么意思。暂时停止思考引导程序并编写您想要实现的目标。另外，告诉我你如何定义图像的中心？我们所能做的就是确保图像是方形的或裁剪图像以使内容居中

【解决方案3】：

你说你想从 recangles 中获得圆形作物。这可能无法使用 3 个流行的引导类（img-rounded；img-circle；img-polaroid）来完成

您可能希望使用border-radius 编写自定义CSS 类，您可以在其中拥有更多控制权。如果你想要它更圆，只需增加半径即可。

.CattoBorderRadius
{
    border-radius: 25px;
}

&lt;img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" /&gt;

小提琴网址：http://jsfiddle.net/ccatto/LyxEb/

我知道这可能不是完美的半径，但我认为您的答案将使用自定义 css 类。希望这可以帮助。

【讨论】：

小提琴似乎过时了

【解决方案4】：

在css中使用这个

.logo-center{
  border:inherit 8px #000000;
  -moz-border-radius-topleft: 75px;
  -moz-border-radius-topright:75px;
  -moz-border-radius-bottomleft:75px;
  -moz-border-radius-bottomright:75px;
  -webkit-border-top-left-radius:75px;
  -webkit-border-top-right-radius:75px;
  -webkit-border-bottom-left-radius:75px;
  -webkit-border-bottom-right-radius:75px;
  border-top-left-radius:75px;
  border-top-right-radius:75px;
  border-bottom-left-radius:75px;
  border-bottom-right-radius:75px;
}

<img class="logo-center"  src="NBC-Logo.png" height="60" width="60">

【讨论】：

这将是你的 html

【解决方案5】：

您必须为该图像指定高度和宽度。

例如。 height : 200px 和 width : 200px 也给border-radius:50%;

要创建圆形，您必须提供相等的高度和宽度

如果您使用的是 bootstrap，则将高度和宽度以及 img-circle 类赋予 img

【讨论】：

【解决方案6】：

问题主要是因为宽度必须==到高度，而在bs的情况下，高度设置为自动，所以这里是在js中解决这个问题

function img_circle() {
    $('.img-circle').each(function() {
        $w = $(this).width();
        $(this).height($w);
    });
}

$(document).ready(function() {
    img_circle();
});

$(window).resize(function() {
    img_circle();
});

【讨论】：

【解决方案7】：

你需要取相同的高度和宽度

只需使用 border-radius:360px;

【讨论】：

【解决方案8】：

您可以简单地使用 .rounded-circle bootstrap。

 <img class="rounded-circle" src="http://placekitten.com/g/200/200"/>

您甚至可以通过为图像提供内联样式来指定圆形图像的宽度和高度，该样式会覆盖默认大小。

 <img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />

【讨论】：