必须让img有明确可适配的盒子，否则object-fit:cover失效；需为td或其子div设宽高和overflow:hidden，并配合object-position、scale-down等策略确保头像正常显示。
object-fit 在表格单元格里处理头像，核心就一条：**必须让 img 有明确可适配的盒子，否则 object-fit: cover 彻底失效**。常见现象是头像还是被拉伸、留白、或根本没变化——不是属性写错了，是盒子没立住。
table cell 里 img 没生效？先检查父容器尺寸是否“实心”
表格单元格（td 或 th）默认不设宽高，img 的 object-fit 就找不到缩放基准。浏览器会按原始尺寸渲染，cover 或 contain 都不触发。
- 给
td显式设width和height（比如width: 60px; height: 60px;），或用min-width/min-height+overflow: hidden - 更稳妥的做法：套一层
div作为img的直接父容器，并在该div上设尺寸和overflow: hidden - 避免只设
max-width或max-height—— 它们不提供“盒子”，object-fit仍无效 - 如果表格用了
table-layout: auto，列宽可能随内容浮动，建议改用table-layout: fixed配合width控制
头像统一为圆形且居中显示，object-fit: cover 必须配 object-position
圆形容器裁剪人脸时，object-position: center 往往把额头或下巴切掉——因为默认焦点在图像正中心，而人脸通常偏上。
-
img必须设width: 100%; height: 100%，缺一不可；只写width: 100%时height: auto会让object-fit被忽略 - 圆形容器（
border-radius: 50%）的父div要设overflow: hidden，否则裁掉的部分会溢出破坏圆角 - 推荐
object-position: center 20%或50% 15%，把视觉焦点上移，确保眼睛区域完整可见 - 不要依赖
vertical-align或margin: auto居中——object-position才是裁剪控制的唯一可靠方式
不同尺寸头像混排时，object-fit: scale-down 比 cover 更安全
当表格同时存在 1:1、4:3、甚至横幅型头像时，cover 在窄单元格里会疯狂裁剪，contain 又导致高度不一致。这时 scale-down 是折中解。
-
object-fit: scale-down等效于取none和contain中更小的尺寸，既防拉伸又保关键内容可见 - 它天然适配响应式：小图保持原尺寸，大图等比缩小，不会突兀裁剪
- 需配合
width: 100%; height: 100%和父容器固定尺寸，否则退化为none - 若背景色非透明，建议加
background-color: #f0f0f0填补scale-down可能产生的留白
移动端表格列宽收缩后，object-fit 失效的典型原因
小屏下 td 宽度被压缩到接近 img 原始宽度，但高度未同步约束，结果 object-fit: cover 因高度缺失而降级为 fill，头像又被拉扁。
立即学习“前端免费学习笔记（深入）”；
- 别只靠
vw或百分比设列宽，用min-width锁死最小可用空间（如min-width: 48px） - 对头像单元格单独设
height: 48px，并搭配line-height: 48px防止文字撑高 - Safari 旧版（iOS 13.3 之前）对
table内object-fit支持不稳定，可加兜底：img { width: 100%; height: auto; }配合max-width - 真要兼容极老 Safari，考虑用
background-image替代img标签，但会丢失alt和语义化
object-fit 不是开关，是策略。表格里一个没设 height 的 td，或一个没加 overflow: hidden 的圆形容器，就能让整套配置归零。最常被跳过的两步：给父容器设明确尺寸、在父容器上加 overflow: hidden。 
