How To Keep Images In An Html Template Inside Outlook From Expanding Unnecessarily With React?

I'm creating a email generator using React. I'm rendering tables (since that's what an email must have). In most email browsers the email looks decent, except in Outlook which expa

Solution 1:

In the Outlook on Windows (from 2007 to 2019, using Word's rendering engine), percentage widths on <img> elements are based on the image file’s physical width, not the parent element’s width as one should expect in CSS. So if your image is 100px wide, width="100%" will equal to 100px. And if your image is 2000px wide, it will equal 2000px. The appropriate solution for Outlook is to use a fixed width in pixels via the HTML width attribute, and use a width:100%; styles for other clients in an inline style (which Outlook will ignore).

You're going to need to update your Img component to include the image’s width and render it with something like this:

<img width="${width}" src=${image}
                  alt="ad" style="text-align: right; width: 100%; border: 0;
                  text-decoration:none;
                  vertical-align: baseline;">