CSS Bootstrap 3：使用 img-circle，如何从非方形图像中获取圆形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21852978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Using img-circle, how to get circle from non-square image?
提问by Abdull
I have rectangular, not necessarily squareimages.
我有矩形，不一定是方形图像。
Using Bootstrap's img-circle, I'd like to get circularcrops, not elliptical/non-circularcrops of these rectangular images.
使用 Bootstrap 的img-circle，我想获得圆形裁剪，而不是这些矩形图像的椭圆/非圆形裁剪。
How can this be accomplished? The crops should behave in an img-responsivemanner and should be centered.
如何做到这一点？作物应该以某种img-responsive方式表现并且应该居中。
JSFiddle to illustrate the non-circular behavior of non-square img-circleimages.
JSFiddle 来说明非方形img-circle图像的非圆形行为。
<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>
回答by zds
I see that this post is a little out of date but still... I can show you and everyone else (who is in the same situation as I was this day) how i did it.
我看到这篇文章有点过时了，但仍然......我可以向你和其他所有人（与我今天的情况相同）展示我是如何做到的。
First of all, you need html like this:
首先，你需要这样的html：
<div class="circle-avatar" style="background-image:url(http://placekitten.com/g/200/400)"></div>
Than your css class will look like this:
比你的 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;
}
It is responsive circle, centered on original image.
You can change widthand heightnot to autofill its parent if you want.
But keep them equal if you want to have a circle in result.
它是响应圈，以原始图像为中心。如果需要width，您可以更改而height不是自动填充其父项。但是如果你想在结果中有一个圆圈，请保持它们相等。
Link with solution on fiddle
与小提琴上的解决方案链接
I hope this answer will help struggling people. Bye.
我希望这个答案能帮助有困难的人。再见。
回答by Lokesh Suthar
I use these two methods depending on the usage. 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%
}
回答by Catto
You stated you want circular crops from recangles. This may not be able to be done with the 3 popular bootstrap classes (img-rounded; img-circle; img-polaroid)
你说你想要从 recangles 中获得圆形作物。这可能无法使用 3 个流行的引导程序类（img-rounded; img-circle; img-polaroid）来完成
You may want to write a custom CSS class using border-radiuswhere you have more control. If you want it more circular just increase the radius.
您可能希望使用 border-radius 编写自定义 CSS 类，以便您拥有更多控制权。如果你想让它更圆，只需增加半径。
.CattoBorderRadius
{
border-radius: 25px;
}<img class="img-responsive CattoBorderRadius" src="http://placekitten.com/g/200/200" />Fiddle URL: http://jsfiddle.net/ccatto/LyxEb/
小提琴网址：http: //jsfiddle.net/ccatto/LyxEb/
I know this may not be the perfect radius but I think your answer will use a custom css class. Hope this helps.
我知道这可能不是完美的半径，但我认为您的答案将使用自定义 css 类。希望这可以帮助。
回答by Neeraj Das
use this in css
在 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">
回答by Hitesh Modha
You have to give height and width to that image.
您必须为该图像提供高度和宽度。
eg. height : 200pxand width : 200pxalso give border-radius:50%;
例如。height : 200px并且width : 200px还给border-radius:50%;
to create circle you have to give equal height and width
要创建圆，您必须提供相等的高度和宽度
if you are using bootstrapthen give height and width and img-circleclass to img
如果您使用的是引导程序，则为img-circleimg提供高度和宽度以及类别
回答by ctf0
the problem mainly is because the width have to be == to the height, and in the case of bs, the height is set to auto so here is a fix for that in js instead
问题主要是因为宽度必须 == 到高度，并且在 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();
});
回答by Pulkit
You Need to take same height and width
您需要采用相同的高度和宽度
and simply use the border-radius:360px;
只需使用border-radius:360px;
回答by Ram
You could simply use .rounded-circle bootstrap.
您可以简单地使用 .rounded-circle bootstrap。
<img class="rounded-circle" src="http://placekitten.com/g/200/200"/>
You can even specify the width and height of the rounded image by providing an inline style to the image, which overrides the default size.
您甚至可以通过为图像提供内联样式来指定圆形图像的宽度和高度，该样式会覆盖默认大小。
<img class="rounded-circle" style="height:100px; width: 100px" src="http://placekitten.com/g/200/200" />
