Prevent thunderbird from magnifying image and use it as a link

We want to send out an email via Laravel backend with an image in it which is wrapped in an a tag, but thunderbird uses the magnifying tool on hover instead of being able to click on the image.

In the source it's like this:

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

And in the mail template:

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

I even added overflowing="false" and shrinktofit="true" attributes but Thunderbird overwrites them and then it uses its deafult css.

Is there a fix for this?

Solution

I've recently stumbled on the same issue myself and have found a hack:

You can try creating an overlay link on top of your image, so that the link will be clickable and not the image itself.

Create a wrapper "div" with position relative and "a" with position absolute directly below with styles:

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

Below it, you can add a regular "a" with "img".

So it's like this:

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

Make sure the wrapper div and the image have styles for max-width.

Regular link is for fallback, but it can be omitted after testing in various clients.