Question

我使用http://backgrounds.cm为我的桌子制作背景图片，我正在经历一个制作电子邮件活动的可怕过程，该活动需要编写看起来非常非常古老的HTML。

无论如何，这是我的表格代码：

<table width="600" border="0" cellpadding="0" cellspacing="0" class="force-row" style="width: 600px;" background="images/image.png" bgcolor="#ffffff" valign="bottom">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:576px;">
    <v:fill type="tile" src="images/merrychristmas.png" color="#ffffff" />
    <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
  <tr>
    <td class="cols-wrapper" style="padding-left:12px;padding-right:12px">
    <!--[if mso]>
      <table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
      <tr><td width="576" style="width: 576px;" valign="top"><![endif]-->
        <table width="576" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 576px;">
          <tr>
            <td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:0px;padding-bottom:0px">
              <div class="col-copy" style="font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;text-align:left;color:#333333;margin-top:12px">Content here</div>
              <br>
              <table bgcolor="#1480ef" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td class="button" height="35" style="text-align:center;font-size:16px;font-family:sans-serif;font-weight:normal;padding:0 20px 0 20px;">
                    <a href="#" target="_blank" style="color:#ffffff;text-decoration:none;">Button</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr><!-- /Content -->
        </table>
      <!--[if mso]></td></tr></table><![endif]-->
    </td>
  </tr>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</table>

我正在使用的背景图像看起来很好，但是当我尝试创建响应式电子邮件设计时，它无法正确缩放。我在顶部附近有一个横幅，它可以很好地缩放，但我不知道如何使背景图像缩放。此刻图像保持固定宽度，但我希望它始终缩放到表格的宽度。

有什么想法吗？

Answer 1

您可以尝试设置background-size：contains;在您拥有图像的元素上。你只会看到它可以在较小的屏幕上工作，例如平板电脑和智能手机，这些都可以得到支持。移动设备上的Css支持似乎比桌面版客户端好得多......

电子邮件HTML - 为表格制作响应式背景图像

1 个答案: