html - 用不失真的图像填充圆圈

Question

我有一个网站，用户可以在其中上传未知尺寸的照片。 我正在尝试找出如何制作固定大小的图像圈。我可以创建圆圈和圆形图像，但我无法弄清楚如何防止图像在圆圈中扭曲。有没有办法用任何图像填充固定大小的圆圈而不扭曲图像(最好居中)？我在这里做了一个 fiddle 。非常感谢。

#circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
}

<div><img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"></div>

Answer 1

你可以使用object-fit

#circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
  object-fit: cover;
}

<div><img src="https://source.unsplash.com/MUnoV4capRk/600x300" alt="" id="circle"></div>

有关更多信息，请阅读 object-fit in css