图片撑开的本质是行内元素按内容尺寸参与表格盒模型计算，且表格不支持overflow或max-height；需用table-layout:fixed、显式列宽、object-fit等组合方案实现稳定布局。

图片撑开 <td> 的本质，是它作为行内元素默认按内容尺寸参与表格盒模型计算，而表格自身又不支持常规的 <code>overflow 或 max-height 限制。直接设 width="100%" 只能治标，高度和变形问题依然存在。

为什么 img { max-width: 100%; height: auto; } 不够用

这条规则只约束宽度，图片原始高度仍会向上影响 <td> 行高；若图片宽高比与单元格不匹配，<code>height: auto 会导致高度不可控，尤其在多行文本混排时，整行被顶高。更麻烦的是：<tr> 对 <code>height 和 max-height 完全无视，CSS 无法直接“压住”它。

table-layout: fixed 是必须前置条件

没有它，列宽随内容浮动，max-width 失效，图片再怎么缩也拦不住列被撑宽。启用后，列宽由 <col> 或首行 <td> 的 <code>width 决定，后续所有单元格都服从该宽度约束。

• 必须配合显式列宽设置，例如：<col style="width: 120px"> 或 <td style="width: 120px"> <li>避免用百分比宽度（如 <code>width: 30%），在 fixed 模式下行为不稳定
• 注意：IE8+ 支持，但旧版 Safari 对 col 宽度解析有偏差，建议优先用 <td> 上设 <code>width

  图片真正填满且不变形的关键三步

  仅靠 max-width 无法让图片视觉上“贴满”单元格。需同时控制尺寸、裁剪和对齐：

  • 给 <td> 设固定 <code>width 和 height，并清除默认 padding：padding: 0
  • 图片加 width: 100%; height: 100%; object-fit: cover; —— cover 保证填满不拉伸，contain 则留白
  • 重置 <td> 的 <code>vertical-align 和 line-height：vertical-align: top; line-height: 0;，消除行内元素基线间隙

    大图或未知尺寸图片的兜底方案

    当图片原始尺寸远超单元格（比如 2000×1500 像素），即使加了 object-fit，首次渲染仍可能触发短暂布局抖动。此时需额外干预：

    

    html-to-pptx

    将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

    下载
    • 用 img { display: block; } 消除行内间隙，避免底部多出几像素空白
    • 对超大图加 loading="lazy" 防止阻塞渲染，但注意 Safari 旧版本不支持
    • 极端场景（如后台 CMS 允许上传任意尺寸图），服务端应生成缩略图，前端只加载适配尺寸——CSS 再强也救不了带宽和重绘压力

    真正难的不是让图片变小，而是让表格结构彻底“免疫”内容尺寸变化。一旦依赖 table-layout: fixed + 显式宽高 + object-fit 这套组合，后续哪怕换图、改文字，行高列宽都不会再飘。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！