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

Question

我有一个接近基本的 HTML 电子邮件签名，除了一个部分外，它工作得很好。我希望签名中的图片也是一个链接，这样当收件人点击图片时，他们可以被重定向到我的网站。但是，我已经实现了两种不同的方式，它们都显示了不同的问题。

我尝试的第一种方法如下。 <td>的 <tr>有图片的背景图，而且在<tr>在 <td> 下面, 有一个 div与包含在父级中的图像大小相同 <a> . <div>具有高于图像的 z-index 并且应该位于图像的“顶部”。有时在发送电子邮件时显示正确，但其他时候显示如下:https://imgur.com/a/gErbeII由此 <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>

我尝试的第二种方法如下。

<table>
    <tr>
        <a href="link-to-website">
            <img src="link-to-image" width="165" height="38" />
        </a>
     </tr>
 </table>

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

我也试过将 DPI 降低到 72，但这也没有用。

Answer 1

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

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