[SalesForce] Image 100% width Outlook

I'm currently facing an issue that images that are inserting in a marketing cloud custom template are scaling well to 100% at all kind of email clients but Outlook. The max-width is always ignored by outlook, is there a workaround to easily fix max-width for outlook? I've read a workaround to scale the image to the max-width size before uploading it to the marketing cloud.

Has anybody solved that issue before?

Best Answer

Generally outlooks tend to scale the images to its natural width and height if the width is set to 100%. In order to fix this issue I tend to keep the width and height inlined in the image css.

Here are the steps to reproduce:

  • Upload an image of any width and set it to the desired width (width less than the actual email table) inlined in the <img attribute. The reason why we set fixed width and height to <img attribute is because outlook doesn't keep the image size to table width and sets to natural image size.
  • Set a class to the <img attribute or set it to the <td> which is wrapping the <img attribute. If you're using the content builder then it will strip out all the elements from <img tag that's why it is best to set the class to <td>

Here is the sample code:

1. In the email body

<table class="emailWidthAuto" width="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="banner" align="center"><img src="http://unsplash.it/g/1200/400?text=BANNER" border="0" alt="Banner"  style="display:block; width: 600px" width="600" /></td>
    </tr>
</table>

2. In the email header

@media screen and (max-width: 600px) {
    .emailWidthAuto {
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .banner img {
        height: auto !important;
        width: 100% !important;
    }
}

Reference post to set this as a content block for users with limited knowledge of html and css here.

Related Topic