CSS 如何在圆圈中显示用户个人资料图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25685227/
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
How to display user profile image in circle?
提问by harsh4u
I am developing a site where the users' profile image needs to display in a circle. There are many circles on this site and the circle size can vary.
我正在开发一个网站，用户的个人资料图片需要显示在一个圆圈中。此站点上有许多圆圈，圆圈大小可能会有所不同。
I can display square images properly but with vertical and horizontal images I face a problem.
我可以正确显示方形图像，但是对于垂直和水平图像，我遇到了问题。
I have to display the image in a circle with the below criteria:
我必须使用以下标准在圆圈中显示图像：
- Suppose image size is
500x300. The image should crop 100px off of the right and left sides, so that the center of the image is shown. Now the image should be300x300, centered. Then I need to make a circle from that image. OR hide 100px of the right and left of the image using CSS. - If image size is
300x500, then the top and bottom area should be hidden using CSS
- 假设图像大小为
500x300。图像应从左右两侧裁剪 100 像素，以便显示图像的中心。现在图像应该是300x300，居中。然后我需要从那个图像做一个圆圈。或使用 CSS 隐藏图像左右两侧的 100 像素。 - 如果图像大小为
300x500，则应使用 CSS 隐藏顶部和底部区域
What do I have to do to fix this? CSS-only answers are best for me, if possible.
我该怎么做才能解决这个问题？如果可能，仅 CSS 的答案最适合我。
回答by Luke
background-size
background-size
As the image sizes are variable, you want to make sure they coverthe div as well as being centered within it.
由于图像大小是可变的，您要确保它们cover是 div 以及在其中被center编辑。
Adding the border-radius: 50%;will give you the circle effect.
添加border-radius: 50%;会给你圆形效果。
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.one {
background-image: url('http://placehold.it/400x200');
}
.two {
background-image: url('http://placehold.it/200x200');
}
.three {
background-image: url('http://placehold.it/200x400');
}<div class="user one">
</div>
<div class="user two">
</div>
<div class="user three">
</div>In practice, you wouldn't want to have a class for each image, so you'd specify it with an inline style in the markup:
实际上，您不希望每个图像都有一个类，因此您可以在标记中使用内联样式指定它：
<div class="user" style="background-image:url('path/to/user/img.png')"></div>
object-fit
object-fit
A newer alternative is to use the object-fitproperty on a regular <img>tag. This does not work in IE or older versions of Edge.
较新的替代方法是object-fit在常规<img>标签上使用该属性。这在 IE 或旧版本的 Edge 中不起作用。
.user {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}<img src="http://placehold.it/400x200" class="user">
<img src="http://placehold.it/200x200" class="user">
<img src="http://placehold.it/200x400" class="user">回答by LuudJacobs
set the image as background, centered.
将图像设置为背景，居中。
<div class="image"></div>
css:
css：
.image{
width: 300px;
height: 300px;
border-radius: 50%; /*don't forget prefixes*/
background-image: url("path/to/image");
background-position: center center;
/* as mentioned by Vad: */
background-size: cover;
}
回答by Nithya Sundar
If you are using bootstrap you have class img-circle to do this.
如果您正在使用引导程序，您可以使用 img-circle 类来执行此操作。
回答by Aadil Masavir
<html>
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
