CODEWITHSUNDEEP
responsive-designoutlookhtml-email
user1059511
user1059511

Reputation: 267

Image larger than table width in outlook

I have created a fluid email template that works beautifully everywhere, expect in outlook. The basic structure wraps a outlook only table around my fluid table. 

// table to keep everything at 580 for outlook
<!--[if (gte mso 9)|(IE)]>
  <table width="580" align="center" cellpadding="20" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">
    <tr>
      <td>
<![endif]-->

     // fluid table up to 960px
    <table class="content" align="center" cellpadding="20" cellspacing="0" border="0" style="width:100%!important; max-width:960px;border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">

     // image is 960px wide 
     <tr><td><img src="myimage.jpb"></td></tr>

    </table>

<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
</table>
<![endif]-->

The problem I have is outlook does not resize the 960px image to 580px, it simply expands the table and so I get horizontal scrollbars. Is there any way to force the image to be resized to 580px, but only for outlook?

Upvotes: 0

Views: 1323

Answers (1)

Gortonington
Gortonington

Reputation: 3587

Outlook resizes your images based on its own algorithms and not actually based on your HTML or CSS declarations. As usual Outlook is the mouth-breathing cousin that means well, but just makes things so much harder for everyone else.

Your best bet is to resize the image itself to 580px. This should help minimize the damage Outlook does as it usually references the actual size of the image and not the declared sizes you put in HTML or CSS.

Sometimes setting a defined value to the width or height attribute will work, but you need to do so without quotes (e.g. width=300). Not sure exactly why this works, but sometimes it will constrain it to the right proportions.

Upvotes: 0

Related Questions