Bootstrap 3：使用img-circle，如何从非正方形图像获取圆？ [英] Bootstrap 3: Using img-circle, how to get circle from non-square image?

问题描述

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

使用Bootstrap的 img-circle ，我想要获得圆形作物，不是椭圆形/非圆形这些矩形图像的作物。

Using Bootstrap's img-circle, I'd like to get circular crops, not elliptical/non-circular crops of these rectangular images.

如何实现？作物应该采取 img-responsive 的方式，并且应该

How can this be accomplished? The crops should behave in an img-responsive manner and should be centered.

JSFiddle说明非方形的非圆形行为 img-circle 图片。

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

推荐答案

我看到这篇文章有点过时但仍然...
我可以告诉你和其他人（谁是在这样的情况下，我这一天）我是如何做到的。

I see that this post is a little out of date but still... I can show you and everyone else (who is in the same situation as I was this day) how i did it.

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

比你的css类看起来像这样：

Than your css class will look like this:

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 不要自动填充其父级。
但是如果你想在结果中有一个圆，保持它们相等。

It is responsive circle, centered on original image. You can change width and height not to autofill its parent if you want. But keep them equal if you want to have a circle in result.

使用小提琴上的解决方案链接

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

I hope this answer will help struggling people. Bye.

这篇关于Bootstrap 3：使用img-circle，如何从非正方形图像获取圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！