Bootstrap 3:使用img-circle,如何从非正方形图像中获取圆圈？

Question

我有矩形,不一定是方形图像.

使用Bootstrapimg-circle,我想获得圆形作物,而不是这些矩形图像的椭圆形/非圆形作物.

如何实现这一目标？作物应该以某种img-responsive方式表现并且应该居中.

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>

Answer 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不是自动填充其父级.但如果你想在结果中有一个圆圈,那么保持它们相等.

链接小提琴上的解决方案

我希望这个答案能帮助陷入困境的人们.再见.

Answer 2

我根据用途使用这两种方法.小提琴

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