Question

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

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>

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

与fiddle

上的解决方案相关联

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

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

Answer 3

你说你想要重新开圆的圆形作物。这可能无法通过3个流行的bootstrap类完成（img-rounded; img-circle; img-polaroid）

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

＆＃13;

.CattoBorderRadius
{
    border-radius: 25px;
}

＆＃13;

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

＆＃13;

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

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

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

Answer 5

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

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

创建圆圈，你必须给出相同的高度和宽度

如果您使用的是 bootstrap ，请提供高度和宽度，并将img-circle类设为img

Answer 6

问题主要是因为宽度必须是==到高度，而在bs的情况下，高度设置为auto，所以这里是js的修复，而不是

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

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

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

Answer 7

你需要采用相同的高度和宽度

只需使用 border-radius：360px;

Answer 8

您可以简单地使用.rounded-circle引导程序。

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

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

8 个答案: