object-fit: cover在表格单元格中无效是因为<td>默认无固定高度，导致浏览器无法确定裁剪容器尺寸；必须为<td>设置宽高约束（如aspect-ratio或padding-bottom）并配合<img>的width/height/object-fit/overflow等属性协同生效。
表格单元格里加 object-fit: cover 为什么没反应？
不是属性写错了，而是 <td> 默认没有可计算高度——表格行高由内容撑开，图片原始尺寸又反过来决定行高，形成死循环。浏览器根本不知道“往多大框里 fit”，object-fit 直接被忽略。
-
<td>只设了width: 100%，但没设height或min-height，也没用aspect-ratio - 父级
<tr>没设固定高度，<td>高度随图片原始尺寸浮动 - 用了
vertical-align: middle但没配line-height或容器高度，对object-fit无影响 - 在
<table>上直接写object-fit—— 无效，它只作用于替换元素（<img>）本身
必须给 <img> 和它的容器同时加约束
单靠 object-fit: cover 不够，得让浏览器明确知道“盒子”在哪。推荐组合：
-
<td>设width: 100%; aspect-ratio: 16 / 9;（现代浏览器），或 fallback 用padding-bottom: 56.25%+position: relative -
<img>写display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; -
<td>加overflow: hidden;，否则裁剪部分会溢出破坏表格边框 - 避免在
<img>上同时写max-width: 100%和width: 100%，Safari 旧版可能重排异常
表格布局下 object-fit: cover 和 contain 怎么选？
这不是风格问题，是语义绑定：
-
object-fit: cover：适合商品图、头像、封面类图片——填满单元格无留白，但默认裁剪中心，人脸常被切掉；必须配object-position: center top微调锚点 -
object-fit: contain：适合证件照、图标、说明书插图——整张图必须可见，留白由<td>的background-color补上；此时object-position基本无效 - 绝对别用
object-fit: fill，它就是拉伸变形的代名词，和没写一样
iOS Safari 13.3 及更早版本的兼容性陷阱
这些版本完全不支持 object-fit 在 <img> 上生效，加 -webkit-object-fit 也无效，会静默退化成 fill 行为（即拉伸）。
立即学习“前端免费学习笔记（深入）”；
- 真机测试时，横屏切换可能让
aspect-ratio失效，导致高度突变，cover 缩成小图 - 稳妥降级方案：用
background-image替代，background-size: cover+background-position，但会丢失alt、SEO 和原生懒加载 - 关键业务场景（如用户头像）建议服务端预裁剪为固定比例，绕过前端适配
<td> 都是一个独立渲染上下文，你写的每一条 object-fit 规则，都依赖该单元格存在稳定、可测量的宽高基准——这个“盒子”一旦塌陷，所有样式就归零。 
