Gmail会在我的简报中删除背景大小

nu.*_*rix 13 html css gmail newsletter

我有一封电子邮件简报,其中包含产品的产品图片,这些产品是通过简报推广的.我使用全尺寸图片并调整大小:

<table cellspacing="0" cellpadding="0" border="0" style="width: 201px; height: 240px; background-image: url({{ item1.picture }}); background-repeat: no-repeat; background-size: 100% auto;">
Run Code Online (Sandbox Code Playgroud)

Gmail剥离了

background-size: 100% auto;
Run Code Online (Sandbox Code Playgroud)

标签和图片以完整尺寸显示.有什么方法可以解决这个问题吗?我不想在服务器端调整每张图片的大小.

Jus*_*ald 31

我通过使用background css简写方法解决了这个问题.在一行中定义图像,重复和大小,如下所示:

background: url({{ item1.picture }}) no-repeat top / 100% auto;
Run Code Online (Sandbox Code Playgroud)

请注意,size属性应在position属性('top')之后定义,并用'/'分隔.


Joh*_*ohn 0

您的技术在 Outlook 中不起作用。我知道它不在问题中,但它是排名第二的最受欢迎的电子邮件客户端。我建议使用 VML/背景组合,如backgrounds.cm中所示。

我不确定您是否会在 html 电子邮件中获得 100% 调整大小的背景图像。我只见过平铺或非平铺的实现。有什么理由不能只使用普通的图像标签吗?像这样的东西跨客户端运行良好:

<td>
  <img alt="" src="" width="100%" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
Run Code Online (Sandbox Code Playgroud)