使图像圆形和特定大小，不拉伸，掩盖其余部分

Question

给定一个图像，我可以使用以下css:

使其具有特定的高度和宽度

.image {
width: 140px;
height: 140px;
border-radius: 80px;
}

<img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.the-sun.com%2Fwp-content%2Fuploads%2Fsites%2F6%2F2021%2F01%2FNA-Joe-biden-impeachment-comp-2.jpg&f=1&nofb=1"></img>

如果图像不是完全正方形(如上所示)，图像将被拉伸。我如何缩小图像以适应css中指定的宽度和高度，并掩盖任何额外的图像，而不是缩小它以适应?

Answer 1

使用object-fit: cover:

.image {
width: 140px;
height: 140px;
border-radius: 80px;
object-fit: cover;
}

<img class="image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.the-sun.com%2Fwp-content%2Fuploads%2Fsites%2F6%2F2021%2F01%2FNA-Joe-biden-impeachment-comp-2.jpg&f=1&nofb=1"></img>