html - 如何使用 CSS 调整电子邮件中动态图像的大小？

Question

我有一封营销电子邮件，我只能在其中使用 HTML 和 CSS 编写代码。我们有一个 250x250 的图像固定空间。通过我们的电子邮件系统传入的图像将是动态的，可以是 250x500、500x250 或 500x500。我们想调整它们的大小以适应 250x250 的空间。但是，我们不希望风景或肖像图像失真。

我们有这段代码使它成为 Letterbox 并添加填充。这似乎适用于移动设备和大多数电子邮件客户端。在 Yahoo 和 Gmail 上，肖像会水平拉伸(stretch)一点。

但是，这在 Microsoft Outlook 上不起作用，这是我们的主要问题。有人可以查看此代码并告诉我它是否正常以及是否有修复程序可以使其在 Outlook 上运行？

<div style="width: 250px; height: 250px; 
            overflow: hidden; 
            position: relative; 
            margin: 10px 10px 0 10px; border: 1px red solid;">
    <img src="https://cdn.staticsfly.com/i/sfly/y/2015/1144360_test_360x500_v2.jpg" 
         style="position: absolute; 
                left: -100%; right: -100%; top: -100%; bottom: -100%;
                margin: auto; 
                height: auto; width: auto; 
                max-width:100%; max-height:100%" 
         border="0" alt="">
</div>

Answer 1

Outlook 在 WordHTML 上运行。这意味着几乎不支持 DIV 标签，也不支持 img 样式。最好的办法是将其转换为表格，并将 TD 用于大部分样式。

参见 here用于电子邮件客户端中的 CSS 兼容性。