Image aspect ratios and fluid width images

I'm working on a template and am running into some oddness with image aspect ratios and sizing.

I've got the following code;

<img src="images/header.jpg" width="960" editable class="stretch" border="0" style="height: auto !important;">

with the '.stretch' class defined as follows;

img.stretch {width: 100%; height: auto !important;}

This works as expected in the 'preview' in Campaign Monitor, the image scales to fill the page while maintaining the correct aspect ratio, however when a test email is sent the image is distorted.

code output is:
<img src="" class="stretch" style="height:auto !important;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;font-size:inherit;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;vertical-align:baseline;font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;width:100%;" border="0" height="308" width="960">

screenshots below;

expected result:

actual result:

Redferret, 4 years ago

Hi there davehuffman,

it looks as though Campaign Monitor adds the height of the image to the HTML, and with good reason, height:auto is badly supported so it's always best to state your image dimension explicitly.

Gmail app apologist
davehuffman, 4 years ago


So are you saying there's no way to do a fluid width image? That seems asinine.

roshodgekiss roshodgekiss, 4 years ago

Hi Dave and co, thought I'd chip in on this one. Fluid images are particularly tricky, as there isn't particularly great email client support for max-width and min-width - a real caveat emptor here. This tends to be the greater issue, as support for height: auto; seems to be a little more consistent.

That said, the following code should work a treat in email clients that support max-width, min-width AND height: auto:

<style type="text/css">
img.stretch { width: 100%; height: auto; max-width: 980px;}

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 980px;">
    <td><img src="" class="stretch" border="0" height="308" width="960"></td>

If the aspect ratio isn't being maintained, let us know which email client you're using and we'll happily run some tests of our own. Good luck!

Get in touch with us on Twitter:
We're also on Facebook:
davehuffman, 4 years ago

Unfortunately that seems to be a no-go as well. Problematic client seems to be Gmail. There's no way to prevent the automatic addition of the height tag on images?

roshodgekiss roshodgekiss, 4 years ago

HI Dave, I just responded to your earlier email. For the benefit of others reading this thread, I've found an odd fix - using the height HTML attribute, but not defining a height value.

The issue at hand is that Gmail is changing the height CSS property into max-height. For example:

height: auto !important; -> max-height: auto !important;

Same goes for % values - height: 100% -> max-height: 100%.

As a result, heights aren't being respected. However, I have found a really curious fix in my travels - simply not defining a height value at all. For example:

<img src="..." class="stretch" border="0" height="" width="960">

Note the height="". I haven't tested this extensively, but in Gmail at least, it nulls the pre-defined height value and thus, max-height: auto !important; works like magic.

Get in touch with us on Twitter:
We're also on Facebook:
EvilJordan EvilJordan, 2 years ago

So... this hack doesn't (or no longer) works! Just to let anyone attempting to find a fix and banging their head against a wall know and prevent from wasting time.

A more recent thread about this issue (still unresolved) here:

I am very fat.

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free