Gmail 删除了我的时事通讯中的背景尺寸答案

【问题标题】：Gmail removes background-size in my newsletterGmail 删除了我的时事通讯中的背景尺寸
【发布时间】：2013-12-22 10:31:34
【问题描述】：

我有一封电子邮件通讯，其中包含产品的产品图片，这些图片是通过通讯进行推广的。我使用全尺寸图片并调整它们的大小：

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

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

【问题讨论】：

您使用的文档类型
您可以尝试将图像设置为表格的背景，而不是使用stackoverflow.com/questions/8015515/…中描述的样式属性
@Anon：无。也许这是个愚蠢的问题，但它真的那么重要吗？
有没有人为此找到解释/解决方案？

标签： html css gmail newsletter

【解决方案1】：

我通过使用背景 css 速记方法解决了这个问题。像这样在一行中定义图像、重复和大小：

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

注意 size 属性应该定义在 position 属性 ('top') 之后，并用 '/' 分隔。

【讨论】：

完美运行。太棒了。
这很好！它的工作原理：D
Chrome 仍然会去掉大小，只保留不重复的部分。有什么我做错了吗？
绝妙的解决方案?

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：