I've had this problem for a long while trying to handle images for Outlook where the image details are unknown. Why are they unknown? We are syncing product images from thousands of stores.

Things to know:

  • Ratio could be landscape or portrait
  • We can't detect the image size and this varies hugely

For the place we need it, we set a maximum width & height which works fine for everything except Outlook on Windows, because Outlook doesn't like max-width or max-height. Therefore we use one piece of code for images on Outlook where I fix the height with the height attribute (not css) and one for everything else using max-width and max-height. On Outlook, the "everything else" image is hidden.

The problem with Outlook is that fixing the height means that sometimes we get landscape images that could completely bloat the email width and I'm wondering if there's a solution that works with the constraints of ratio and lack of known image size. Any thoughts?

My compromise is either bloating the width with landscape or uneven heights between images if the image is portrait.

Here's the code I'm currently using....

<a href="https://www.google.co.uk" target="_blank" rel="noopener noreferrer" style="outline: 0px; border: none; text-decoration: none;">
<span class="outlook-hide">
<img class="product-image img-rsz" width="220" style="width:auto;height:auto;max-width:220px;max-height:330px;display:block;" src="https://cdn.shopify.com/s/files/1/0001/9857/4138/products/AACB3nw1jbnKw6QY5ecUlF70ltsSK_7HEE3O1WrXPpfrLgWKO6IFRQI9zU8gEDuIp1FWkXuTpuAm5liizKnMuY5MmPX6qDa7iqXd1oiNUMsrHtbWIHbixENhuQIuL5nwK7d_t-udEISPiH1e0qwHoCozyl4L0-gA6La7z1WTk4jgbHhy1B6Uv0qYihWTAYdSiVeNkkX2_480x480.jpg?v=1535005003" alt="">
</span>
<!--[if gte mso 9]><img class="product-image" height="220" style="width:auto;height:auto;max-width:100%;max-height:330px;display:inline-block;margin:0 auto;outline:0;border:none;text-decoration:none;" src="https://cdn.shopify.com/s/files/1/0001/9857/4138/products/AACB3nw1jbnKw6QY5ecUlF70ltsSK_7HEE3O1WrXPpfrLgWKO6IFRQI9zU8gEDuIp1FWkXuTpuAm5liizKnMuY5MmPX6qDa7iqXd1oiNUMsrHtbWIHbixENhuQIuL5nwK7d_t-udEISPiH1e0qwHoCozyl4L0-gA6La7z1WTk4jgbHhy1B6Uv0qYihWTAYdSiVeNkkX2_480x480.jpg?v=1535005003" data-similar-product="image" alt="" /><![endif]-->
</a>