图片在表格单元格中撑满不失真需设td宽高与overflow:hidden，img加width:100%;height:100%;object-fit:cover/contain及vertical-align:top/middle，并用max-width:100%防列宽撑开，配合table-layout:fixed和srcset适配高清屏。
图片在表格单元格里撑满又不失真
直接用 <img> 塞进 <td> 里，大概率会拉伸变形或留白——关键不是“插进去”，而是控制它在固定尺寸单元格里的渲染行为。默认情况下，<img> 是内联元素、自带外边距、不响应容器宽高。
实操建议：
- 给
<td>设明确宽高（比如width: 120px; height: 80px;），并设overflow: hidden防止溢出 -
<img>加width: 100%; height: 100%+object-fit: cover（裁切居中）或contain（等比缩放留白） - 务必加
vertical-align: top或middle，否则底部常有 4px 空隙（这是 inline 元素基线对齐导致的）
避免表格列宽被高清图强行撑开
高清图原始尺寸远大于单元格时，浏览器默认按原图宽计算表格布局，哪怕你后面用 CSS 缩小了显示尺寸。结果就是整列变宽、其他列被压缩。
解决办法很简单但容易漏：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
<img>显式设置max-width: 100%和height: auto（仅当你要保持比例且允许高度自适应时） - 更稳妥的是：在
<td>上用width（如width="120"）或 CSSmin-width/max-width锁死列宽 - 避免在
<img>上只写width不写height——这会导致重排，尤其在慢网下明显闪动
移动端适配时图片模糊或错位
高清图（比如 2x/3x）在 Retina 屏上若没正确声明分辨率，会强制缩放导致发虚；另外表格在小屏上横向滚动失控也很常见。
关键动作：
- 用
srcset+sizes提供多倍图：<img src="a.jpg" srcset="a@2x.jpg 2x, a@3x.jpg 3x"> - 给表格加
table-layout: fixed，再配合<col>标签定义每列宽度，防止内容撑开 - 不要依赖
<table>的自动布局——移动端优先用display: block+ 自定义滚动容器包裹表格
对齐失效的几个典型原因
你以为写了 text-align: center 就能居中图片？不一定。表格单元格的对齐逻辑和普通块级元素不同，且受多种样式叠加影响。
排查顺序：
- 确认
<td>本身设置了text-align: center（对 inline 元素有效），而不是只设在<table>或<tr> - 检查是否误加了
float或position: absolute，它们会让<img>脱离文档流，无视 text-align - 如果用了
object-fit，注意它只作用于替换元素（如<img>），对background-image无效 - 行高（
line-height）设得过大或过小，会影响垂直居中效果，尤其是vertical-align: middle依赖行高计算
vertical-align 和 table-layout: fixed 的组合使用——前者管单个图片在单元格里的上下位置，后者管整张表的列宽稳定性。这两个点没配对，高清图就很难既清晰又整齐。 
