使图像圆形和特定尺寸而不拉伸，掩盖其余部分[重复]

Posted 2023-03-05

【中文标题】使图像圆形和特定尺寸而不拉伸，掩盖其余部分[重复]

【英文标题】：Make image round and specific size without stretching, masking the remainder [duplicate]

【发布时间】：2021-12-11 02:12:13

【问题描述】：

给定一张图片，我可以使用这个 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 中指定的宽度和高度，并屏蔽任何额外的图像而不是缩小它以适应？

【参考方案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>

【讨论】：

效果很好。我唯一会改变的是border-radius: 50%;，因为如果你改变图像的大小，它总是保持圆形。

@Deotyma：是的，你是对的。但是，如果圆角大小超过一半大小并且所有角都相同，则这相当于 50%。