html - 将图像裁剪成正方形，然后使用纯 CSS 将其转成圆形？

Question

我试图用不同大小和不同形状的图像(一些矩形，一些正方形，一些肖像，一些风景)制作一个圆圈。

当我使用:clip-path: circle(50% at 50% 50%); 或 border-radius: 50%; 时，它会变成图像变成完美的圆形，仅如果图像是正方形:

有没有办法将图像裁剪成正方形，然后使用以下方法之一使其成为完美的圆形:

1. 使用纯 CSS 不使用 background-image(大多数图像从服务器端获得背景图像)，
2. 保持 50% 的比例 - 不丢失纵横比 -(如果 border-radius 或 clip-path)(图像大小可能会有所不同)。

这是显示方形图像和矩形图像的代码片段:

.clipped {
    clip-path: circle(50% at 50% 50%);
}

Square<br>
<img src='http://i.imgur.com/d5byNNR.jpg' width="100" class='clipped' /><br><br>
Rectangle<br>
<img src='http://i.imgur.com/22W12EQ.jpg' width="100" class='clipped' />

Answer 1

您可以使用 circle()但没有参数:

.clipped {
   clip-path: circle();
}

它似乎使用图像的较小边作为圆的周长。

工作样本 here .

它适用于 Chrome 和 FireFox。 IE 和 Edge 仍然不支持 clip-path