object-fit不能直接用于<td>或<tr>，必须作用于<img>且需父容器有明确宽高、img设width/height:100%、table-layout:fixed才能生效。
object-fit 不能直接用于 <td> 或 <tr>，它只对替换元素（如 <img>、<video>）生效。想在表格单元格里控制图片缩放，必须把 object-fit 加到 <img> 上，且前提是这张图有明确宽高——而表格默认会按内容撑开，这恰恰是最大陷阱。
为什么表格里 object-fit 常常没反应
表格单元格（<td>）默认没有固定尺寸，<img> 的 width: 100% 在里面算不出具体像素值，浏览器无法计算“填满谁”，object-fit 就彻底失效。
- 常见现象：
style="object-fit: cover"写了但图片还是原始大小、溢出或拉伸变形 - 根本原因：父
<td>没设width/height，或者设了但被表格自动重置（比如table-layout: auto） - 更隐蔽的问题：即使
<td>设了width: 200px，若<img>没写width: 100%和height: 100%，object-fit依然不触发
让 object-fit 在表格中真正生效的三步法
关键不是“加属性”，而是构建一个浏览器能精确计算的盒模型链。
- 给
<table>加table-layout: fixed—— 否则列宽由内容决定，<td>的width会被忽略 - 给目标
<td>显式设width和height（如width: 120px; height: 80px），或用min-width/min-height配合overflow: hidden -
<img>必须写display: block; width: 100%; height: 100%，再加object-fit和object-position
object-fit: cover 和 object-fit: contain 在表格单元格中的实际取舍
表格常用于数据展示，图片多为头像、状态图标、缩略图，选哪个取决于信息优先级。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：适合头像、状态徽章类——要求填满单元格、视觉统一，允许裁剪边缘（比如人像切掉肩膀） -
object-fit: contain：适合产品图、文档截图、带文字的示意图——必须完整显示，留白可接受，否则关键信息丢失 - 注意：
object-fit: scale-down在表格里几乎无效，因为它的触发条件是“图片原始尺寸 > 容器尺寸”，而表格单元格尺寸不稳定，很难保证这个前提
Flex/Grid 替代方案比表格更可控
如果只是想排图片网格，硬套表格反而增加限制。现代布局下，display: grid 或 display: flex 配合 aspect-ratio 更可靠：
-
<div class="grid"><img src="..."></div>+.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } - 每个
<img>设aspect-ratio: 4 / 3; width: 100%; object-fit: cover; - 省去
table-layout、列宽声明、min-width: 0等一堆兼容性补丁
表格的本质是语义化结构化数据，不是图片容器。真要塞图进去，得主动收束它的弹性；不如换种结构，从根上避开问题。
