TehGoose
TehGoose

Reputation: 1

Image Resizing Challenge in MSO Outlook 2016

I am working on creating a hero email module, (Polaroid style with text and CTA below the hero image.) but I'm encountering an issue with the image not fitting properly inside the container in MSO Outlook 2016. The original image dimensions are 2045x1365, and I need to resize it to 520x347 within the email.

Below is my current implementation:

<table align="center" style="background-color:#{{module.background_color}}; max-width: 570px; border-radius: 12px; width: 100%;">
  <tr align="center">
    <td style="padding: 20px;">
      <!--[if mso]>
      <table cellpadding="0" cellspacing="0" border="0" width="520">
        <tr>
          <td>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="width:520px;height:347px;" fill="true" stroke="false">
              <v:fill src="{{module.module3image.src}}" type="frame" aspect="atleast"/>
              <v:textbox inset="0,0,0,0">
      <![endif]-->
      <img src="{{module.module3image.src}}" alt="{{module.module3image.alt}}" style="display: block; max-width: 520px; width: 100%; height: auto; mso-hide: all;">
      <!--[if mso]>
              </v:textbox>
            </v:rect>
          </td>
        </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
  <tr align="center">
    <td style="color: #F3EDE0; font-size: 39px; max-width: 520px; font-weight: 700; border-radius: 25px; padding: 0 20px 15px; font-family: Helvetica; letter-spacing: -1.17px; line-height: 39px;">
      {{module.module3richtexttitle}}
    </td>
  </tr>
  <tr align="center">
    <td style="color: #F3EDE0; font-size: 17px; max-width: 520px; border-radius: 25px; padding: 0 20px; font-family: Helvetica;">
      {{module.module3richtextfield}}
    </td>
  </tr>
  <tr align="center">
    <td style="padding: 15px 15px 20px 15px;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{module.module3buttonurl.href}}" style="height:43px;v-text-anchor:middle;width:{{module.buttonwidth}}px;" arcsize="96%" strokecolor="#ffffff" fillcolor="#F50A23">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica;font-size:16px;font-weight:bold;">{{module.module3buttontext}}</center>
      </v:roundrect>
      <![endif]-->
      <a href="{{module.module3buttonurl.href}}" style="background-color:#F50A23; border:1px solid #F3EDE0; border-radius:22px; color:#F3EDE0; display:inline-block; font-family:Helvetica; font-size:16px; font-weight:bold; line-height:43px; text-align:center; text-decoration:none; width:{{module.buttonwidth}}px; -webkit-text-size-adjust:none; mso-hide:all;">{{module.module3buttontext}}</a>
    </td>
  </tr>
</table>

The image displays correctly in all versions of Outlook except MSO Outlook 2016, where the dimensions remain closer to the original size, causing it to not fit properly within the container.

Upvotes: 0

Views: 27

Answers (0)

Related Questions