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

【问题标题】：cirular image inside a bootstrap column on a non square image file非方形图像文件的引导列内的圆形图像
【发布时间】：2015-04-20 22:27:50
【问题描述】：

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

关键是我想将它放在引导列中并具有img-responsive 效果

我真的搞砸了试图实现它

【问题讨论】：

我在这里找到了解决方案。检查一次。 stackoverflow.com/questions/22445276/…
好吧 - 我找到了不涉及强制图像为正方形的更智能的解决方案。但是它们不适用于图像响应...

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 已经有一个类：img-circle

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

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

【讨论】：

如果图像不是正方形，它会创建一个椭圆

【解决方案2】：

最好的办法是为图片使用一个新的css类，

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

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

【讨论】：

【解决方案3】：

你能用DEMO?这样的东西吗？我认为可以通过将你的图像设置为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>

【讨论】：

是的......但它并不是真正响应。无论您如何更改浏览器，它都保持 150x150（在非常窄的浏览器上 - 它太大了）
您将不得不利用媒体查询来实现您正在寻找的内容。