Responsive images have stretched height in Outlook. OK I'm pissed!

So I've been looking for a while to figure it out to code responsive emails without media queries. The problem I ran into is Outlook which seems to have a problem with width & height on images or more specifically when they are not declared. Outlook Mail is stretching the images vertically when there is no height specified or when the height is 100%. But we need 100% / auto for the images to be responsive. Or so I thought.

The first fix I found was on the Litmus forums. It involves hardcoding the image width for Outlook using conditional comments. I tested and this fixed the issue. However, using this fix for each and every responsive image for Outlook could be overwhelming so I went looking even more into it.

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">

   <tbody>

      <tr>

         <td>

            <!--[if gte mso 9]>

            <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="" width="600" border="0" style="display:block;" />

            <div style="width:0px; height:0px; max-height:0; max-width:0; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">

               <![endif]-->

               <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="" width="100%" border="0" style="display:block;" />

               <!--[if gte mso 9]>

            </div>

            <![endif]-->

         </td>

      </tr>

   </tbody>

</table>

After some trial and error, my final fix was adding some more styling to the image in addition to hardcoding the width. I tested again in Email on Acid and it looks great everywhere.

<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 600px" width="600" border="0" cellspacing="0" cellpadding="0" align="center">

   <tr>

      <td style="border-collapse: collapse;" align="center">

         <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellspacing="0" cellpadding="0" align="center" width="100%">

            <tr>

               <td style="border-collapse: collapse;" align="center"><a href="#" target="_blank"><img style="display:block; border:none; width:100%; max-width:100%" src="https://dummyimage.com/600x400/000/fff.jpg" width="600" alt="" title=""/></a></td>

            </tr>

         </table>

      </td>

   </tr>

</table>

What this means is that you don't necessarily need media queries anymore.What I wish is for Outlook to stop using the Word processor so we can start coding like in the modern days we live in, using DIVs and not tables. But that will take some time to happen if it will ever happen.

Happy coding! Your email friend, the email snob.