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

Question

我有一个图像，我想有一个圆形效果（原始图像是矩形的，我希望它是圆形的 - 典型的个人资料图像）为此找到了很多来源。

问题是我想把它放在引导列中并具有img-responsive效果

我真的搞砸了试图实现它

Answer 1

Bootstrap 已经有一个类：img-circle

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

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

Answer 2

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

例如。如果您为特定图像提供 css 类"img-circle"，则该属性应遵循 css 类。

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

Answer 3

你能用这个演示吗？我认为可以通过将您的图像设置为background-image并定义一个相当于圆直径的border-radius来实现。

您还必须像构建响应式设计一样使用媒体查询。

以下是小提琴中所示的示例：

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