Html 从保持比例并仅使用图像中心的矩形图像创建圆形头像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26681059/
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
Create a circle avatar from a rectangle image keeping proportions and just using centre of image
提问by user3086854
I have images that are 480px wide by 640px high.
我有 480 像素宽 x 640 像素高的图像。
I want to display them as circles on a webpage 150px wide using CSS. But I want to see the centre of the image.
我想使用 CSS 在 150 像素宽的网页上将它们显示为圆圈。但我想看到图像的中心。
So take 80px of the top and bottom of the original image produces the square with the image I want to see. I then want to make that into a circle.
因此，将原始图像顶部和底部的 80px 生成带有我想要查看的图像的正方形。然后我想把它变成一个圆圈。
Everything I try stretches the image as most examples are to use a square image to start with.
我尝试的所有操作都会拉伸图像，因为大多数示例都是使用方形图像开始的。
Can any one help
任何人都可以帮忙
回答by meagar
You can set the image as the background of an element, set its background-size to cover, and then use border-radius to round the edges.
您可以将图像设置为元素的背景，将其 background-size 设置为cover，然后使用 border-radius 使边缘变圆。
#avatar {
/* This image is 687 wide by 1024 tall, similar to your aspect ratio */
background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
/* make a square container */
width: 150px;
height: 150px;
/* fill the container, preserving aspect ratio, and cropping to fit */
background-size: cover;
/* center the image vertically and horizontally */
background-position: top center;
/* round the edges to a circle with border radius 1/2 container size */
border-radius: 50%;
}<div id="avatar"></div>回答by Brosig
Another solution is to set the sizes for img and use "object-fit: cover;". It will do the same as the "background-size:cover" without messing with background images.
另一种解决方案是设置 img 的大小并使用“object-fit:cover;”。它将与“background-size:cover”相同，而不会弄乱背景图像。
img {
object-fit: cover;
border-radius:50%;
width: 150px;
height: 150px;
}<img src="http://i.stack.imgur.com/Dj7eP.jpg" />I found it on Chris Nager post. - 1
我在 Chris Nager 的帖子上找到了它。- 1
Edit:
As @prograhammer mentioned, this doesn't work on IE. Edge supports it only on <img>tags.
编辑：正如@prograhammer 提到的，这不适用于 IE。Edge 仅在<img>标签上支持它。
Partial support in Edge refers to
object-fitonly supporting<img>- 2
Edge 中的部分支持是指
object-fit仅支持<img>- 2
Edit 2: Thispost of Primo? Cigler shows how to use Modernizrto add a fallback support for IE but, in this case, you will need to add a wrapper to de image.
编辑 2： Primo 的这篇文章？Cigler 展示了如何使用Modernizr添加对 IE 的后备支持，但在这种情况下，您需要为 de image 添加包装器。
回答by Paulie_D
If the image is required to be in the HTML rather than a background image
如果图片需要在 HTML 中而不是背景图片
.wrapper {
width:150px;
height:150px;
margin: 25px auto;
overflow: hidden;
border-radius:50%;
position: relative;
}
.wrapper img {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}<div class="wrapper">
<img src="http://lorempixel.com/output/business-q-c-640-480-4.jpg" alt="" />
</div>回答by Jacek Gralak
Another solution is simple css class for img element:
另一个解决方案是 img 元素的简单 css 类：
.avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}
Usage:
用法：
<img class="avatar" src="http://path.to/image.jpg" />
