根本原因是img默认不响应容器宽度且与td对齐逻辑冲突；需同时控制图片缩放（max-width:100%;height:auto）、单元格对齐（vertical-align:middle）和表格列宽计算（table-layout:fixed+width:100%+col宽度定义）。
图片在表格里总被拉伸或错位怎么办
根本原因是 img 默认不响应容器宽度，且和 td 的对齐逻辑冲突。直接写 <img src="x.jpg"> 放进表格，小屏下要么溢出，要么被压缩变形，文字还可能上跳。
必须同时控制三件事：图片自身缩放、单元格内容对齐、表格列宽计算逻辑。
-
img加max-width: 100%; height: auto;—— 禁止撑破单元格，保持比例 -
td设vertical-align: middle;，img加vertical-align: middle;—— 消除基线错位 - 整个
table必须设table-layout: fixed; width: 100%;，否则列宽随内容跑偏 - 至少一个
<col>或首行<th> 要带明确宽度，比如 <code><col style="width: 20%">想让表格+图片并排但不破坏语义怎么办
别把图片塞进表格单元格里硬凑——尤其是当图片是说明图、示意图或品牌 logo 时。表格只该承载二维结构化数据；图片属于独立视觉元素，混在一起会让响应式逻辑缠死。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法是用外层容器做布局分隔，让表格和图片成为同级兄弟元素。
- 用
display: flex包裹<table> 和 <code><img>，加gap控制间距 - 给
img设固定尺寸或aspect-ratio+object-fit: cover，避免加载塌陷 - 小屏下用
@media (max-width: 768px)把 flex 方向改为 column，图片自然落到表格下方 - 禁用
float—— 它在 flex 容器里无效，还会干扰文档流 - 外层容器必须设
overflow-x: auto和-webkit-overflow-scrolling: touch -
table加min-width: fit-content（或具体值如min-width: 1024px），防止内容被强行压缩 - 删掉所有
white-space: nowrap—— 它会让长 URL 或无空格文本顶破容器 - 图片列用
width: 60px这类固定值，而非百分比，避免小屏下反复重算 - IE11 不支持
fit-content，得回退到min-width: 1200px这类保守值 - 每个含图片的
td加data-label，比如<td data-label="缩略图"><img ...></td> - CSS 中用
::before { content: attr(data-label) ": "; }插入说明文字 -
img的alt仍要写具体内容，如alt="红色运动鞋正面图"，不能只写“图片” - 避免用背景图方式放图 ——
background-image对无障碍完全不可见
表格列数多、又有图片时怎么防横向溢出
常见错误是只加
width: 100%就以为万事大吉，结果 iOS 上一滑就卡顿，安卓上文字挤成一团。这不是样式没写够，而是没切断表格的默认渲染惯性。data-label 堆叠模式下图片怎么保留可访问性
当表格在手机上转成卡片式布局（
tr变display: block），td里的图片如果只是靠src显示，屏幕阅读器会读不到上下文。光靠alt不够，因为表头语义丢了。div+grid；什么时候图片该进单元格，什么时候必须抽出来。一旦列数 ≥ 4 或字段含非结构化内容（比如带操作按钮的图片列），就该考虑放弃表格，改用语义更清、响应更稳的现代布局方案。 - 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
