我可以使用什么 css 在电子邮件模板中即时裁剪图像？

Question

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

Answer 1

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

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

我正在使用 Campaign Monitor CSS 作为参考。

选项 1：如果您不关心支持 Outlook.com and/or 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 电子邮件很棘手。我敢肯定还有其他几种选择。我希望这个回复能让你找到正确的方向。

Answer 2

由于各种邮件客户端对 html 和 CSS 属性的支持有限，您将无法使用原版 CSS 和 [=33 实现裁剪图像效果=] 技术.

除 Outlook 和 Outlook.com

外，大多数邮件客户端都支持以下内容

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

不幸的是，大多数邮件客户端不支持 clip、overflow:hidden 或 background-clip.

即使是嵌入的图像也很少得到支持。 Send a base64 image in HTML email

最好的解决方案是根据需要渲染图像的副本，而不使用任何 CSS 技巧。这是您问题的唯一真正解决方案。

What css can I use to crop image on the fly in an email template?