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

Question

我有一封电子邮件简报，其中包含产品的产品图片，这些产品图片通过简报进行宣传。我使用全尺寸图片并使用以下内容调整大小：

<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;">

Gmail删除了

background-size: 100% auto;

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

Answer 1

我通过使用background css简写方法解决了这个问题。像这样在一行中定义图像，重复和大小：

background: url({{ item1.picture }}) no-repeat top / 100% auto;

请注意，size属性应在position属性（＆＃39; top＆＃39;）之后定义，并用＆＃39; /＆＃39;分隔。

Answer 2

您的技术在Outlook中不起作用。我知道这不是问题，但它是＃2最受欢迎的电子邮件提示。我建议使用backgrounds.cm中展示的VML /背景组合。

我不确定你是否会在html电子邮件中获得100％调整大小的背景图片。我只看过平铺或非平铺的实现。你有什么理由不能使用普通的图像标签吗？这样的东西很适合跨客户端：

<td>
  <img alt="" src="" width="100%" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>

Answer 3

我在电子邮件中构建了一个带有twitter徽标的按钮：

所以我使用background-image添加Twitter徽标和background-size来渲染图像的视网膜大小。

我尝试了background-* CSS属性的完整版本，以及速记版本background: url() no-repeat 16px center / 24px auto，Gmail仍在使用它。

所以我的解决方案是使用img HTML标记而不是background属性。并且它实际上更好，因为img标记在电子邮件客户端中得到更广泛的支持。

<a href="#" style="background-color: #55acee; display: inline-block; padding: 12px 24px;  color: #ffffff;  font-family: sans-serif; font-size: 16px; font-weight: bold; line-height: 24px; text-align: center; text-decoration: none; min-width: 200px; border-radius: 2px; border-bottom-color: #188acf; border-bottom-width: 3px; border-bottom-style: solid;">
  <!-- logo image should be 48x48px -->
  <img src="twitter_logo@2x.png" width="24" height="24" style="vertical-align: bottom; padding-right: 10px;"> 
  Share the good news on Twitter
</a>