用不变形的图像填充一个圆圈

Question

我有一个网站，用户可以上传未知尺寸的照片。我正在尝试找出如何使图像成为固定大小的圆圈。我可以创建圆圈并创建圆形图像，但我不知道如何防止图像在放入圆圈时变形。有没有办法用任何图像填充固定大小的圆圈而不扭曲图像（最好居中）？我在这里做了一个小提琴。非常感谢。

#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-fitcss