表格中img设置object-fit仍变形或留白，根本原因是td默认无明确宽高约束，height:100%无效，需显式设td宽高或table-layout:fixed，配合display:block、overflow:hidden及object-position微调。

为什么表格里的 img 设置了 object-fit 还是变形或留白？

根本原因是表格单元格（<td> 或 <code><th>）默认不提供可计算的宽高约束，<code>object-fit 失去作用基准。浏览器不知道“填满谁”，哪怕你给 img 写了 width: 100%; height: 100%，它仍按原始比例渲染。

• <td> 默认是 <code>display: table-cell，高度由内容撑开，height: 100% 在这种上下文中无效
• 即使给 <td> 设了 <code>height: 200px，如果内部 img 没设 display: block，行内默认对齐会留下底部间隙，导致实际可用高度变小
• 表格自动布局（table-layout: auto）下，列宽由内容决定，width: 100% 可能被忽略
• 没加 overflow: hidden —— object-fit: cover 裁掉的部分会溢出单元格，甚至影响相邻行高

如何让 <td> 成为 <code>object-fit 的可靠容器？

必须打破表格默认的“内容驱动尺寸”逻辑，把单元格变成有明确渲染尺寸的块级容器。

• 给 <td> 显式设置 <code>width 和 height（如 width: 120px; height: 80px），或用 min-width/min-height + overflow: hidden
• 强制 <td> 使用 <code>table-layout: fixed 在 <table> 上，再配合列宽（<code><col> 或 width 属性）锁定尺寸
• 给 <td> 加 <code>vertical-align: top，避免因默认 middle 对齐导致内部 img 垂直居中后上下留空
• <td> 内部的 <code>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> + <code>background-image：background-size: cover + background-position: center
  • 这样写：给 <td> 加类 <code>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 行为，再谈填充方式。</td>