我有矩形，不一定是正方形的图像。
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>
解决方法
我看到这个帖子是有点过时，但仍然…
我可以告诉你和其他人(谁是在同样的情况，我是这一天)我是怎么做的。
我可以告诉你和其他人(谁是在同样的情况，我是这一天)我是怎么做的。
首先，你需要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;
}
它是响应圆，以原始图像为中心。
如果需要，您可以更改宽度和高度，以便不自动填充其父级。
但如果你想在结果中有一个圆，保持它们相等。
我希望这个答案将帮助挣扎的人。再见。
