HTML邮件开发问题：图片尺寸超出150px限制致布局错乱

邮件客户端（尤其是桌面版Outlook）对CSS的max-width支持有限，只靠这个属性没法稳定限制图片宽度，需要结合表格单元格约束、图片原生属性和兼容式CSS来修复：

具体调整方案 #

• 给每个容纳图片的<td>设置固定宽度+溢出隐藏：style="width:150px; max-width:150px; overflow:hidden; text-align:center;"
• 给<img>同时设置自适应宽度和硬限制：style="width:100%; max-width:150px;"，并添加原生width和height属性（填图片实际尺寸或按150px等比例缩放后的尺寸，Outlook会优先识别原生属性）
• 给包裹图片的<a>标签设置块级显示+宽度限制：style="display:block; max-width:150px;"，避免链接区域撑大单元格

修改后的代码 #

<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
    <tbody>
        <tr>
            <td style="width:150px; max-width:150px; overflow:hidden; text-align:center;">
                <a href="x" style="display:block; max-width:150px;">
                    <img style="width:100%; max-width:150px;" 
                         src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/51f59cb7-156c-5f86-2aa1-063260371792.jpg" 
                         alt="" width="150" height="XXX"> <!-- 替换XXX为图片等比例缩放后的高度 -->
                </a>
            </td>
            <td style="width:150px; max-width:150px; overflow:hidden; text-align:center;">
                <a href="x" style="display:block; max-width:150px;">
                    <img style="width:100%; max-width:150px;" 
                         src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/612e5d3e-6c17-95d1-5535-229ac0cf8779.jpg" 
                         alt="" width="150" height="XXX">
                </a>
            </td>
            <td style="width:150px; max-width:150px; overflow:hidden; text-align:center;">
                <a href="x" style="display:block; max-width:150px;">
                    <img style="width:100%; max-width:150px;" 
                         src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/2bcfb68e-b795-87a9-e988-c486c57ced2c.jpg" 
                         alt="" width="150" height="XXX">
                </a>
            </td>
        </tr>

        <tr>
            <td style="width:150px; max-width:150px; overflow:hidden; text-align:center;">
                <a href="x" style="display:block; max-width:150px;">
                    <img style="width:100%; max-width:150px;" 
                         src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/68a6b8ca-36ea-e69c-be4f-7760413cfb93.jpg" 
                         alt="" width="150" height="XXX">
                </a>
            </td>
            <td style="width:150px; max-width:150px; overflow:hidden; text-align:center;">
                <a href="x" style="display:block; max-width:150px;">
                    <img style="width:100%; max-width:150px;" 
                         src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/979a39f1-5e41-e609-25e7-3fb34c57ab1f.jpg" 
                         alt="" width="150" height="XXX">
                </a>
            </td>
            <td style="width:150px; max-width:150px; overflow:hidden; text-align:center;">
                <a href="x" style="display:block; max-width:150px;">
                    <img style="width:100%; max-width:150px;" 
                         src="https://mcusercontent.com/42504dec05e7e9f311428833a/images/089a7298-67a4-45fa-5937-c06b1f6021f7.jpg" 
                         alt="" width="150" height="XXX">
                </a>
            </td>
        </tr>
    </tbody>
</table>

关键说明 #

• 桌面版Outlook依赖图片的原生width/height属性和表格单元格的width来约束尺寸，对CSS的max-width支持不佳
• width:100%让图片在移动端自适应单元格宽度，配合max-width:150px防止在宽屏环境下超出限制
• overflow:hidden确保单元格内容不会撑破布局，display:block让链接区域和图片尺寸保持一致

内容的提问来源于stack exchange，提问作者Kay Bouman