HTML表格td背景色显示在图片后方，图片无法填满单元格出现间隙如何解决

问题根因 #

你遇到的aqua背景漏出问题核心有两个原因：

1. <td>标签默认存在内置padding，没有手动清零的话会在图片和单元格边框之间产生间隙
2. 你给<td>设置了固定44px高度，但图片仅设置了width:100%，如果图片自适应后的高度不足44px，单元格下方就会漏出背景色

解决方法 #

• 给<td>的style属性添加padding: 0，清除单元格默认内边距
• 给img的style属性添加height: 100%; object-fit: cover;，让图片完全填满单元格，同时保持图片比例不变，不会出现拉伸变形
• 若没有强制单元格高度的需求，可直接删除<td>里的height: 44px配置，让单元格高度随图片高度自动适配，从根源避免高度差漏背景的问题

修正后完整代码 #

<!doctype html>
<html>
<head>
</head>

<body>
    <table style="border-spacing: 0; background-color: black;">
    <tr>
        <td style="width: 600px; height: 44px; padding: 0; border-spacing: 0; background-color: aqua">
        <img style="display: block; width: 100%; height: 100%; object-fit: cover;" src="...banner.jpg">
        </td></tr></table>
</body>
</html>

内容的提问来源于stack exchange，提问作者Bryan Monesson-Olson