从保持比例并仅使用图像中心的矩形图像创建圆形头像

Question

我有 480 像素宽 x 640 像素高的图像。

我想使用 CSS 在 150px 宽的网页上将它们显示为圆圈。但我想看到图像的中心。

因此，取原始图像顶部和底部的 80px 生成带有我想要查看的图像的正方形。然后我想把它变成一个圆圈。

我尝试的所有操作都会拉伸图像，因为大多数示例都是从使用方形图像开始的。

谁能帮忙

原文由 user3086854 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将图像设置为元素的背景，将其 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>

原文由 user229044 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另一种解决方案是设置 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" />

我在 Chris Nager 的帖子上找到了它。 - 1

编辑：正如@prograhammer 所提到的，这在 IE 上不起作用。 Edge 仅在 <img> 标签上支持它。

Edge中的部分支持是指 object-fit 只支持 <img> - 2

编辑 2：Primož Cigler 的 这篇 文章展示了如何使用 Modernizr 添加对 IE 的回退支持，但在这种情况下，您需要添加一个包装器来去除图像。

原文由 Brosig 发布，翻译遵循 CC BY-SA 3.0 许可协议