如何实现指定尺寸圆形图片无拉伸并裁剪超出区域

你当前的写法拉伸变形是因为img标签默认会拉伸内容适配容器宽高，只需给图片样式新增object-fit相关配置即可实现等比缩放+超出裁剪的效果。

修改后的完整CSS代码如下：

.image {
  width: 140px;
  height: 140px;
  border-radius: 80px;
  /* 新增属性 */
  object-fit: cover;
  object-position: center;
}

属性说明：

• object-fit: cover：强制图片保持原始宽高比缩放，直到完全覆盖你设定的140px*140px容器，超出容器边界的部分会被直接裁剪，完全不会出现拉伸变形
• object-position: center：控制图片在容器内的展示位置，设置为center会让图片中心和容器中心对齐，适合头像类场景，避免人物面部等核心内容被裁剪，你也可以根据需求调整为top/left/right等值自定义展示区域

该方案兼容所有主流现代浏览器，无需额外修改HTML结构即可生效。

内容的提问来源于stack exchange，提问作者yalpsid eman