防止雷鸟放大图像并将其用作链接

Question

我们想通过 Laravel 后端发送一封电子邮件，其中包含包含在 a 标签中的图像，但是 Thunderbird 在悬停时使用放大工具，而不是能够单击图像。

在源码中是这样的：

<a href=3D"https://test.com/register?invite_id=3D57" style=3D"display: block; padding: 0; margin: 0; width: 100%;">
    <img src=3D"cid:[email protected]" alt=3D"" style=3D"display: block; width: 100%;">
</a/>

在邮件模板中：

<a href="https://test.com/register?invite_id={{$inviteId}}" style="display: block; padding: 0; margin: 0; width: calc(100%);">
    <img src="https://test.com/public/images/invitation-small.jpg" alt="" style="display: block; width: calc(100%); object-fit: contain;" overflowing="false" shrinktofit="true">
</a>

我什至添加了 overflowing="false" 和 shrinktofit="true" 属性，但 Thunderbird 会覆盖它们，然后使用其默认的 css。

这个问题有解决办法吗？

Answer 1

试试这个：

我推荐 Adam Katz 解决方案并检查是否适用。

在你的风格中使用 !important。

请注意，“3D” 是“=”字符的十六进制值。

此“3D”将出现在 Gmail 中，但电子邮件将正确呈现。它会显示在 Outlook 中。

请分享尝试此解决方案后的结果，以便为您提供进一步帮助。

Answer 2

我最近自己也偶然发现了同样的问题，并找到了一个破解方法：

您可以尝试在图像顶部创建一个覆盖链接，以便可以单击该链接而不是图像本身。

直接在下面创建一个具有相对位置的包装器“div”和具有绝对位置的“a”：

<a href="url" style="outline:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;" tabindex="-1" target="_blank"></a>

在其下方，您可以添加一个常规的“a”和“img”。

所以是这样的：

<div> // Relative wrapper
    <a></a> // Absolute overlay
    <a> // Regular link
        <img> // Your image
    </a>
</div>

确保包装 div 和图像具有最大宽度的样式。

常规链接是为了后备，但在各种客户端测试后可以省略。