0

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?

2

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.

  • Hi Brad, thanks! Is there a way to automate this? We have some users that aren‘t really into HTML & CSS. I mean, we can at least put the css in our email templates header. Put don‘t have an idea on how to automate the image attributes/table. – Michael H Oct 22 '17 at 6:26
  • 1
    @MichaelH I have updated my answer above which includes setting this up in a content builder in sfmc. Please accept and up-vote my answer if found useful. thank you – Brad Sapkota Oct 22 '17 at 6:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.