Question

我有一个基本的HTML电子邮件签名，除了一部分外，它可以正常工作。我希望签名中的图像也成为链接，以便收件人单击图像时可以将其重定向到我的网站。但是，我实现了两种不同的方式，它们都显示出不同的问题。

我尝试的第一种方法如下。 <td>的{{1}}具有图片的背景图片，并且在<tr>下面的<tr>中，有一个<td>大小相同包含在父级div中的图像。 <a>的z索引高于图片的z索引，应位于图片的“顶部”。有时在发送电子邮件时，它似乎正确显示，但在其他时候，它看起来像这样：https://imgur.com/a/gErbeII，其中<div>位于图像上方。

<div>

我尝试的第二种方法是下面的方法。

<table>
    <tr>
        <td background="url('link-to-image')" style="display: block !important; margin-left: -2px !important; width: 165px !important; height: 38px !important; background-image: url('http://www.sykes.capital/sykes-capital-logo.jpg'); background-size: cover; background-repeat: no-repeat; padding: 0px;">    </td>
         <a href="link-to-website">
             <div style="position: absolute; z-index: 999; display: block !important; margin-left: -2px !important; width: 165px !important; height: 45px !important; padding: 0px;"></div>
         </a>
     </tr>
 </table>

但是这样做的话，看起来像这样：https://imgur.com/a/fZQcwO2 HTML电子邮件签名正在获取的原始图像大于签名中显示的165x38大小，但是当我在线减小图像大小时，这会降低质量。

我还尝试将DPI降低到72，但这也不起作用。

Answer 1

您的第二种方法是正确的。使用width和height属性控制图像大小，在这种情况下，原始大小并不重要，如下所示，但是请确保保持正确的宽高比。

<div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="101" height="24" />
    </a>
  </div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="90" height="100" />
    </a>
  </div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="150" height="20" />
    </a>
  </div>
  <div>
    <a href="https://www.stackoverflow.com">
      <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" width="90" height="50" />
    </a>
  </div>
</div>

Answer 2

编码电子邮件又回到了基础。使用div进行编码非常棘手，因为您将需要Outlook等电子邮件客户端的后备支持。背景图片是相同的，Outlook会引起很多问题。

您最好的选择是使用第二种方法，但不要错过td的情况（上面的示例中缺少它）。

<table>
    <tr>
        <td>
            <a href="link-to-website">
                <img src="link-to-image" width="165" height="38" style="border:0px;display:block;" />
            </a>
        </td>
     </tr>
 </table>

我在您的链接中添加了两件事：

边界0 ：您可以将其作为属性或样式标签放置在image标签上，它将执行相同的操作。
展示广告块：如果没有此设置，图像下方将有一个空格（将其删除以查看我的意思）

尝试以上操作。另外，如果您使用的是视网膜图像，请注意图像标签上的宽度和高度。在宽度和高度方面，Outlook不能很好地读取图像样式。

HTML电子邮件签名中的图像错误

2 个答案: