html-email - 我可以使用什么 CSS 在电子邮件模板中动态裁剪图像？

Question

如何裁剪电子邮件模板的图像？我有一个特定宽度的图像(例如 520px)。我想确保高度永远不会超过 150px。这仅适用于电子邮件...如果我使用 max-height 或仅使用 height css，那么它会像素化？我还有什么更好的选择？

Answer 1

理想情况下，您可以裁剪图像(手动或以编程方式)，并将其存储在某个位置(在 CDN 上)，您可以在其中嵌入图像，并且它将按预期显示。

如果此 ^ 不是一个选项，则您的限制取决于您需要支持的电子邮件客户端。

我正在使用Campaign Monitor CSS作为引用。

选项 1:如果您不关心支持 Outlook.com 和/或 Outlook 2007/10/13，您可以将图像设置为元素的背景属性，如下所示:

<div style="
    width: 520px; 
    height: 150px; 
    background-image: url(http://placehold.it/520x520)">
</div>

这里我们使用 520x520(方形)图像，并将父元素设置为所需的大小(根据您的示例为 520x150)。

现在您面临着定位图像背景的问题。根据指南，如果您尝试定位，您将失去 Gmail，这可能会破坏交易。但是，作为练习，您可以这样做:

<div style="
    width: 520px;
    height: 150px;
    background-image: url(http://placehold.it/520x520);
    background-position: 50%;>
</div>

现在您已经获得了按所需尺寸定位(居中)的图像。在一个元素上。

选项 2:也仅限于一组特定的客户端。您可以在包装器上使用position:relative，在标签上使用position:absolute。然后使用top、left属性来定位。

当然，除了 Outlook 和 Gmail 之外，您还会失去 Yahoo。

HTML 电子邮件很棘手。我确信还有其他几种选择。我希望这个回答能为您指明正确的方向。