如何将未知尺寸图片无变形填充至固定大小圆形？

嘿，这个问题其实用CSS就能轻松搞定！你遇到的图片变形问题，核心是没控制好图片的缩放规则，只要加上object-fit属性，就能完美满足你「无变形+优先居中」的需求。

核心解决方案：使用object-fit: cover #

我们只需要给圆形容器加上裁剪溢出的样式，再给图片设置保持比例填充的规则就行：

1. 圆形容器样式（保留原有设置，新增overflow: hidden）

#circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden; /* 裁剪超出圆形边界的图片部分 */
}

2. 图片样式（关键是object-fit: cover）

#circle img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片宽高比，填充整个容器，超出部分自动裁剪，默认居中 */
}

原理说明 #

object-fit: cover会让图片保持原有宽高比例，同时自动调整尺寸，确保图片至少能填满整个圆形容器，超出容器的部分会被裁剪掉，而且图片默认是居中对齐的，完全匹配你的需求。现代浏览器（Chrome、Firefox、Edge等）都支持这个属性。

兼容旧浏览器的备选方案（比如IE） #

如果需要兼容不支持object-fit的旧浏览器，可以用背景图的方式实现：

#circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-image: url('用户上传的图片地址');
  background-size: cover;
  background-position: center;
}

这种方式同样能实现无变形居中填充的效果，只是需要通过JavaScript动态给容器设置background-image属性来绑定用户上传的图片。

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