HTML营销邮件模板适配问题：Logo拉伸与桌面端偏移求助

问题1：Logo在桌面/横屏设备拉伸变形 #

邮件客户端对图片的渲染逻辑和网页差异很大，必须同时控制固定尺寸和自适应规则，不能只靠CSS：

• 给<img>标签明确添加width和height属性（用图片的原始像素值）
• 同时添加内联样式max-width:100%; height:auto;，保证小屏幕自动缩放，大屏幕不拉伸
• 示例代码：

<!-- 修正前（可能只设了宽度或未指定尺寸） -->
<img src="your-logo.png" alt="Logo" style="width:200px;">

<!-- 修正后 -->
<img src="your-logo.png" alt="Logo" width="200" height="80" style="max-width:100%; height:auto; display:block;">

注：display:block;可以避免图片下方出现多余空隙，部分邮件客户端存在这个默认bug

问题2：桌面端内容偏移到右侧 #

邮件必须用表格布局（别用div+flex/grid，绝大多数邮件客户端不支持），偏移的核心原因是外层容器未做居中控制：

1. 最外层套一个100%宽度的表格，设置align="center"
2. 内部内容表格设固定宽度（比如600px，这是邮件模板的黄金宽度），同时加内联样式margin:0 auto;
3. 删除所有可能导致偏移的float、position样式，邮件里别用这些属性

• 示例结构：

<!-- 最外层容器，确保全屏宽度下内容居中 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0;">
  <tr>
    <td align="center">
      <!-- 内容容器，固定宽度，桌面端居中 -->
      <table width="600" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; max-width:100%;">
        <!-- 你的邮件内容（Logo、文本、按钮等）都放在这里面 -->
        <tr>
          <td>...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

注：所有表格的border、cellpadding、cellspacing都设为0，避免默认样式干扰布局

如果原有代码里有嵌套表格，检查每一层的align属性和宽度设置，别让某一层表格的宽度超出父容器，或者未设置居中规则。

内容的提问来源于stack exchange，提问作者Jonathan Borgia