动画 .gif 在 Outlook 2019 中失真

Question

我有一个总宽度为 1200 像素的 .gif 动画，但我想将其缩小到 600 像素宽，以便在 120dpi 下获得更清晰的图像。以下是消息中的代码；它以正确的宽度显示但高度错误（如您所见，没有定义高度，并且它没有按照我希望的方式自动缩放）。

Outlook 2019 是唯一显示错误的电子邮件客户端。它在所有其他电子邮件客户端中看起来都很好。此外，我消息中的其他图像 (.jpg) 完全按照我希望的方式显示，并且它们包含相同的内联 CSS.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
<td style="padding: 0; text-align: center"><a href="https://www.lookoptic.com/collections/screen-products" target="_blank"> <img alt="FRAMES FOR THE FAMILY | Make protecting your eyes from harmful blue light a family choice. With matching frames for adults and kids, we keep it easy for the whole family to keep their eyes healthy even while spending more time in front of screens than ever." border="0" src="https://d3k81ch9hvuctc.cloudfront.net/company/HQd5zH/images/57fbdbba-e232-441f-abc2-098444d1525f.gif" width="600" style="display: block; border: 0px; outline: none;
width: 100%; height: auto; max-width: 600px;background: #fff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" /></a> </td>

</tr>
    </tbody>
</table>

有什么想法吗？提前致谢。

Answer 1

Outlook 将忽略图像的样式 sheet。因此，您可以使用 height 和 width 标签来指导 Outlook 的行为，并允许现代电子邮件客户端以他们需要的方式运行。

如果 Outlook 上的动画图像应为 600px x 600px，请执行以下操作：

<img src="#" width="600" height="600">

然后对于其他客户端，添加内联 style sheet（就像您在示例中所做的那样。

<img src="#" style="width: 100%; height: auto; max-width: 600px;" width="600" height="600">

这适用于 Outlook 支持的任何图像格式。

祝你好运。

动画 .gif 在 Outlook 2019 中失真

Animated .gif distorted in Outlook 2019

html-email

outlook-2019