图片撑开<td>的本质是行内元素按内容尺寸参与表格盒模型计算，且表格不支持overflow或max-height；需用table-layout:fixed、显式列宽、object-fit等组合方案实现稳定布局。
图片撑开 <td> 的本质，是它作为行内元素默认按内容尺寸参与表格盒模型计算，而表格自身又不支持常规的 overflow 或 max-height 限制。直接设 width="100%" 只能治标，高度和变形问题依然存在。
为什么 img { max-width: 100%; height: auto; } 不够用
这条规则只约束宽度，图片原始高度仍会向上影响 <td> 行高；若图片宽高比与单元格不匹配，height: auto 会导致高度不可控，尤其在多行文本混排时，整行被顶高。更麻烦的是：<tr> 对 height 和 max-height 完全无视，CSS 无法直接“压住”它。
table-layout: fixed 是必须前置条件
没有它，列宽随内容浮动，max-width 失效，图片再怎么缩也拦不住列被撑宽。启用后，列宽由 <col> 或首行 <td> 的 width 决定，后续所有单元格都服从该宽度约束。
- 必须配合显式列宽设置，例如：
<col style="width: 120px">或<td style="width: 120px"> - 避免用百分比宽度（如
width: 30%），在fixed模式下行为不稳定 - 注意：IE8+ 支持，但旧版 Safari 对
col宽度解析有偏差，建议优先用<td>上设width
图片真正填满且不变形的关键三步
仅靠 max-width 无法让图片视觉上“贴满”单元格。需同时控制尺寸、裁剪和对齐：
立即学习“前端免费学习笔记（深入）”；
- 给
<td>设固定width和height，并清除默认padding：padding: 0 - 图片加
width: 100%; height: 100%; object-fit: cover;——cover保证填满不拉伸，contain则留白 - 重置
<td>的vertical-align和line-height：vertical-align: top; line-height: 0;，消除行内元素基线间隙
大图或未知尺寸图片的兜底方案
当图片原始尺寸远超单元格（比如 2000×1500 像素），即使加了 object-fit，首次渲染仍可能触发短暂布局抖动。此时需额外干预：
- 用
img { display: block; }消除行内间隙，避免底部多出几像素空白 - 对超大图加
loading="lazy"防止阻塞渲染，但注意 Safari 旧版本不支持 - 极端场景（如后台 CMS 允许上传任意尺寸图），服务端应生成缩略图，前端只加载适配尺寸——CSS 再强也救不了带宽和重绘压力
真正难的不是让图片变小，而是让表格结构彻底“免疫”内容尺寸变化。一旦依赖 table-layout: fixed + 显式宽高 + object-fit 这套组合，后续哪怕换图、改文字，行高列宽都不会再飘。
