Question

我有一个想要有圆形效果的图像（原始图像是矩形的，我希望它是圆形的 - 典型的轮廓图像）找到了很多这方面的资料。

我想把它放在一个bootstrap列中并且具有img-responsive效果

我真的搞砸了试图实现它

Answer 1

Bootstrap已经有了一个类：img-circle

http://getbootstrap.com/css/#images

编辑：对于非方形图片无效，抱歉

Answer 2

你可以使用这样的东西DEMO?我认为可以通过将你的图像设置为background-image并定义一个等于你的圆直径的border-radius来实现。< / p>

在构建响应式设计时，您还必须使用媒体查询。

以下是小提琴中的示例：

CSS

.circle{
height:150px;
width:150px;
background-image:url("http://cdn.playbuzz.com/cdn/3170bee8-985c-47bc-bbb5-2bcb41e85fe9/d8aa4750-deef-44ac-83a1-f2b5e6ee029a.jpg");
background-size:cover;
background-position:center;
border-radius:150px;
margin:0 auto;

}

HTML

<div class="row">
<div class="col-xs-6">
    <div class="circle"></div>
</div>
<div class="col-xs-6"></div>

Answer 3

最好的方法是为图像使用新的css类，

例如，

。如果您为特定图像提供css类“img-circle”，则该属性应该是css类的后续属性。

.img-circle{
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
}

非方形图像文件上的引导列内的圆形图像

3 个答案: