Question

如何裁剪电子邮件模板的图片？我有一个特定宽度的图像（例如520px）。我想确保高度不超过150px。这仅适用于电子邮件...如果我使用max-height或者只是高度css，那么它会变得像素化？我还有其他更好的选择吗？

Answer 1

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

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

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

<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，在wrapper上，以及position：absolute。然后使用top，left属性来定位。

当然，除了Outlook和Gmail之外，你还失去了雅虎。

HTML电子邮件很棘手。我相信还有其他一些选择。我希望这一回应能让你指出正确的方向。

Answer 2

由于各种邮件客户端对html和CSS属性的支持有限，因此无法使用vanilla CSS和HTML技术实现裁剪图像效果。

除Outlook和Outlook.com之外的大多数邮件客户端都支持以下内容

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

不幸的是，大多数邮件客户端都不支持剪辑，溢出：隐藏或后台剪辑。

即使是嵌入式图像也几乎没有支持。 Send a base64 image in HTML email

最好的解决方案是在没有任何CSS技巧的情况下根据需要呈现图像的副本。这是解决您问题的唯一真正解决方案。