CODEWITHSUNDEEP
htmlcssemailoutlookresize
Chris C
Chris C

Reputation: 1

How do I resize dynamic images in an email using CSS?

I have a marketing email, where I can only code in HTML and CSS. We have a fixed space for an image at 250x250. The images coming in thru our email system will be dynamic and can be 250x500, 500x250, or 500x500. We want to resize these to fit in the 250x250 space. But, we don't want the landscape or portrait images to be distorted.

We have this code to make it Letterbox and add padding. This seems to work on mobile, and most email clients. On Yahoo and Gmail, the portrait stretches horizontally a bit.

But, this doesn't work on Microsoft Outlook and that is our main issue. Can someone look at this code and let me know if it's ok and if there's a fix to make it work on Outlook?

<div style="width: 250px; height: 250px; 
            overflow: hidden; 
            position: relative; 
            margin: 10px 10px 0 10px; border: 1px red solid;">
    <img src="https://cdn.staticsfly.com/i/sfly/y/2015/1144360_test_360x500_v2.jpg" 
         style="position: absolute; 
                left: -100%; right: -100%; top: -100%; bottom: -100%;
                margin: auto; 
                height: auto; width: auto; 
                max-width:100%; max-height:100%" 
         border="0" alt="">
</div>

Upvotes: 0

Views: 142

Answers (1)

Gortonington
Gortonington

Reputation: 3587

Outlook runs on WordHTML. This means that there is little to no support on the DIV tag as well as little to no support on img styling. Your best bet is to convert it to tables and use the TD for most of your styling.

See here for CSS compatability in email clients.

Upvotes: 1

Related Questions