object-fit: cover 配合 object-position 才能真正实现等比裁剪；仅用 width/height + border-radius 会导致拉伸或留白，因 border-radius 仅为遮罩不改变缩放逻辑，且 img 默认 inline 显示、无显式尺寸时缩放失准。
直接说结论：object-fit: cover 配合 object-position 才能真正实现等比裁剪，只设 width/height + border-radius 一定会拉伸或留白。
为什么头像加了 border-radius: 50% 还是变形？
因为 border-radius 只是圆角遮罩，不改变图片本身缩放逻辑。原始图片宽高比 ≠ 容器宽高比时，img 默认按 content-box 拉伸填充，结果就是脸被压扁或头顶被切掉。
-
img默认display: inline，底部还有基线间隙，进一步干扰高度计算 - 父容器没设
height或没锁住宽高比（如aspect-ratio），浏览器根本不知道该按什么比例缩放 - 没配
overflow: hidden，裁掉的部分会溢出，看起来像“没裁”
object-fit: cover 必须和 object-position 一起用
默认 object-position: 0 0（左上对齐），人像常被切掉下巴；实际要的是脸部居中。
- 标准正面照用
object-position: 50% 50% - 更稳妥的构图（保留额头和眼睛）用
object-position: 50% 40%—— 上移焦点，不是像素值，响应式下才可靠 - 避免写
object-position: center top，部分旧 WebView 解析不稳定，统一用百分比
容器必须显式控制尺寸，不能靠内容撑开
哪怕只是个头像，也要让浏览器明确知道“这个盒子多大”，否则 object-fit 失效。
- 推荐现代写法：
img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 40%; display: block; } - 兼容老 Safari（div 设
width和height，加border-radius: 50%和overflow: hidden - 别和
max-width: 100%+height: auto共存，后者会覆盖object-fit的计算
不支持 object-fit 的环境怎么 fallback？
微信 X5 内核、Android 4.x WebView 等可能忽略该属性，但降级不能靠 JS 或 polyfill——太重，且影响首屏。
- CSS 层叠 fallback：先写
background-image+background-size: cover，再覆盖object-fit规则 - 别用
@supports (object-fit: cover)包裹，某些 X5 内核识别@supports却不执行object-fit - 最底线保底：
img { max-width: 100%; height: auto; }至少不拉伸，但会留白
最容易被忽略的其实是图片源本身：设计师给的头像只有 100×100 像素，在 Retina 屏上再怎么 object-fit 也糊——这得前端提前卡资源规范，CSS 解不了分辨率问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
