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?

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
2
  • 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, 2017 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 - altus.digital
    Oct 22, 2017 at 6:34
0

I am using this with perfect success in Outlook 365 (2022):

<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .