我有一个接近基本的 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/fZQcwO2 HTML 电子邮件签名获取的原始图像大于签名中显示的 165x38 尺寸，但当我在线缩小图像尺寸时，这会降低质量。
我也试过将 DPI 降低到 72，但这也没有用。
最佳答案
您的第二种方法是正确的。使用宽度和高度属性来控制图像大小，原始大小在这种情况下并不重要，如下所示，但请确保保持正确的纵横比。
<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>关于html - HTML 电子邮件签名中的图像错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56525485/