用图片填充圆形区域而不失真

Question

我有一个网站，用户可以上传未知尺寸的照片。 我正在尝试找出如何将图像变成固定大小的圆形。我可以创建圆形并使图像变成圆形，但我无法弄清楚如何防止图像在放入圆形时失真。是否有一种方法可以填充固定大小的圆形，并且不会扭曲图像（最好居中）？我在这里做了一个演示。非常感谢。

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

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

- JulianJ

---

图片被压缩了。我想保持宽高比。 - JulianJ

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>

更多信息请阅读CSS中的object-fit

- Jose Paredes

Answer 2

图片和容器的尺寸不同。图片比包含元素要大，这就是为什么图片看起来失真的原因。

您应该使用object-fit: cover。

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

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

在这里阅读有关 object-fit 属性的更多信息：object-fit css

- ashfaq.p

Answer 3

最简单的方法是将其用作背景：

.circle {
  border-radius: 50%;  
  width: 100px;
  height: 100px;
  background-size:cover;
  background-position:center;
}

<div class="circle" style="background-image:url(https://source.unsplash.com/MUnoV4capRk/600x300);"></div>

- Temani Afif