Outlook中MJML邮件模板图片显示不全问题求助

Outlook桌面端依赖Word引擎渲染邮件，对图片高度的处理逻辑和浏览器差异极大，单纯给<a>标签或图片设置height属性基本无效，试试这几个针对性的解决办法：

1. 给MJML图片标签添加outlook-height专属属性 #

MJML自带Outlook兼容优化，直接给<mj-image>标签指定outlook-height，和常规height属性配合使用，强制Outlook渲染正确高度：

<mj-image
  src="app-download-btn.png"
  height="60"
  outlook-height="60"
  width="200"
  alt="下载应用"
/>

2. 社交图标用<mj-text>包裹+内联样式消除干扰 #

小尺寸社交图标容易被行高截断，把图标放进<mj-text>容器，同时给图片添加display:block; line-height:0; border:0的内联样式，彻底避免布局冲突：

<mj-text align="center" padding="0">
  <a href="your-social-link" style="display:inline-block;">
    <img src="social-icon.png" height="32" width="32" style="display:block; line-height:0; border:0;" alt="社交图标"/>
  </a>
  <a href="another-social-link" style="display:inline-block; margin-left:10px;">
    <img src="another-icon.png" height="32" width="32" style="display:block; line-height:0; border:0;" alt="社交图标"/>
  </a>
</mj-text>

3. 固定图片尺寸+调整DPI #

• 不要用百分比尺寸，给图片设置固定的width和height像素值
• 把图片DPI调整为96，Outlook会自动缩放高DPI（如300DPI）的图片，导致高度显示异常

4. 验证编译后的HTML源码 #

MJML会生成带Outlook条件注释的HTML，编译后查看<!--[if mso]>代码块里的图片高度是否和设置值一致，确保兼容属性生效。

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