表格中img设置object-fit仍变形或留白，根本原因是td默认无明确宽高约束，height:100%无效，需显式设td宽高或table-layout:fixed，配合display:block、overflow:hidden及object-position微调。
为什么表格里的 img 设置了 object-fit 还是变形或留白？
根本原因是表格单元格（<td> 或 <th>）默认不提供可计算的宽高约束，object-fit 失去作用基准。浏览器不知道“填满谁”，哪怕你给 img 写了 width: 100%; height: 100%，它仍按原始比例渲染。
-
<td>默认是display: table-cell，高度由内容撑开，height: 100%在这种上下文中无效 - 即使给
<td>设了height: 200px，如果内部img没设display: block，行内默认对齐会留下底部间隙，导致实际可用高度变小 - 表格自动布局（
table-layout: auto）下，列宽由内容决定，width: 100%可能被忽略 - 没加
overflow: hidden——object-fit: cover裁掉的部分会溢出单元格，甚至影响相邻行高
如何让 <td> 成为 object-fit 的可靠容器？
必须打破表格默认的“内容驱动尺寸”逻辑，把单元格变成有明确渲染尺寸的块级容器。
- 给
<td>显式设置width和height（如width: 120px; height: 80px），或用min-width/min-height+overflow: hidden - 强制
<td>使用table-layout: fixed在<table>上，再配合列宽（<col>或width属性）锁定尺寸 - 给
<td>加vertical-align: top，避免因默认middle对齐导致内部img垂直居中后上下留空 -
<td>内部的img必须设display: block+width: 100%; height: 100%，否则object-fit不生效
object-fit: cover 和 object-fit: contain 在表格里怎么选？
表格场景下语义更刚性：多数时候你要的是“统一尺寸+视觉一致”，而不是“保留全部信息”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
object-fit: cover是表格头像、状态图标、商品缩略图的首选——确保所有单元格图片高度一致、无拉伸、无留白；但需配object-position: center 10%避免人脸被切掉 -
object-fit: contain只在极少数情况适用，比如表格展示证件照或带文字的图表，且你允许左右/上下出现不等量白边；注意此时object-position基本无效 - 绝对不要用
object-fit: fill——表格里一旦拉伸，不同图片的胖瘦差异会立刻暴露，破坏整齐感 - 如果单元格宽高比和图片原始比例差异极大（比如 16:9 图片塞进 1:1 单元格），
cover会裁掉大量内容，这时不如换图或改单元格尺寸
兼容性问题在表格里更致命，怎么兜底？
IE 完全不支持 object-fit，而表格常用于后台管理系统，IE11 兜底几乎无法绕过。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥的 fallback 是放弃
<img>，改用<div>+background-image：background-size: cover+background-position: center - 这样写：给
<td>加类img-cell，CSS 中写.img-cell { background-image: url(...); background-size: cover; background-position: center; } - 代价是丢失
alt文本和语义化，但表格中图片多为装饰性或辅助性（如状态图标），影响可控 - 如果必须保留
<img>标签，可用 JS 检测object-fit支持：if (!CSS.supports('object-fit', 'cover')) { ... }，动态切换 DOM 结构
表格里图片尺寸失控，往往不是 object-fit 写错了，而是没先驯服表格本身。先锁死 <td> 的尺寸和 display 行为，再谈填充方式。
