图片在<td>中不撑满是因行内元素基线对齐、高度未设及单元格padding/border-collapse所致；需设width/height:100%、object-fit:cover、vertical-align:middle，并重置td padding和table border-collapse。
图片在 <td> 里不撑满、留白、错位，根本不是图片本身的问题，而是默认行内元素行为 + 单元格盒模型共同导致的。直接设 width="100%" 只解决宽度，高度常被忽略，且容易拉伸变形。
为什么 width="100%" 不够用
单纯写 <img src="x.jpg" width="100%"> 只强制宽度占满单元格，但 <img> 默认是行内元素，会保留基线对齐（baseline），下方留白；高度仍按原始宽高比计算，不会自动等比例填高；若单元格高度固定，图片会被截断或留空。
-
vertical-align: middle必须加在<img>上，否则底部空白无法消除 - 仅靠
width="100%"无法控制高度，需配合height: 100%或object-fit -
height: 100%生效前提：父级<td>必须有明确高度（如height: 120px或min-height），否则 100% 无参照
object-fit: cover 是最可控的填充方式
当你要让图片“覆盖”整个单元格（裁剪不拉伸），object-fit: cover 是现代标准解法。它不依赖图片原始尺寸，也不要求父容器固定高宽，只要给 <td> 设定尺寸即可生效。
- 必须搭配
width: 100%; height: 100%写在<img>上 - 父级
<td>推荐设position: relative，避免子元素溢出干扰布局 - IE 不支持
object-fit，如需兼容 IE，改用background-image方案（见下一条） - 示例 CSS：
.td img {<br> width: 100%;<br> height: 100%;<br> object-fit: cover;<br> display: block;<br>}
用 background-image 替代 <img> 的场景
当图片只是装饰性填充、无需语义化（如 alt 文本）、且要严格控制铺满不拉伸时，把图片当背景更稳定，尤其兼容旧浏览器。
立即学习“前端免费学习笔记（深入）”；
- 写法：
<td style="background-image: url('x.jpg'); background-size: cover; background-position: center;"></td> - 必须加
background-size: cover或contain，否则默认平铺 -
<td>需要有明确宽高，否则背景区域不可见 - 缺点：无法设置
alt，SEO 和可访问性弱；不能响应式懒加载（loading="lazy"失效）
容易被忽略的细节：单元格自身 padding 和 border-collapse
即使图片填满了 <td> 内容区，你看到的“没填满”，很可能是 <td> 自带的 padding 或表格边框间距在作祟。
- 检查是否误用了
cellpadding属性（HTML 属性）或paddingCSS —— 它们会在图片和单元格边缘之间强行加空隙 - 表格默认
border-collapse: separate，会引入border-spacing，看起来像“间隙”，实际不是图片问题 - 推荐重置：
table { border-collapse: collapse; }+td { padding: 0; } - 如果用了
display: table-cell模拟表格布局，同样要手动清padding，CSS 不会自动继承原生表格行为
真正卡住人的从来不是“怎么填满”，而是没意识到 <td> 有 padding、<img> 是行内元素、height 百分比需要父级高度支撑这三个点。把它们逐个关掉，再试一次，基本就通了。
