我可以使用哪种CSS在电子邮件模板中即时裁剪图像？

Question

如何裁剪图像作为电子邮件模板？我有一个特定宽度的图像（例如520px）。我想确保高度永远不会超过150像素。这仅适用于电子邮件...如果我使用max-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。然后使用顶部，左侧属性定位。

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

HTML电子邮件非常棘手。我确定还有其他几种选择。我希望这个回应能使您指出正确的方向。