Stretching images on mobiles


I have encountered a problem that I hope someone can help me with.  I have an image in our design:

<img src="header.jpg" alt="Blah" width="600" class="screenshot" editable="true" label="Header image">
and the following CSS to resize the image for viewing on an iPhone.
img[class="screenshot"] { width: 325px !important; }

You'll notice I don't set a height on the image as this will vary.

My problem occurs when I replace the default header image with a new image, the iPhone version stretches the image vertically.  Yet if I send the campaign leaving the default header image in the email the image displays perfectly.

I've tested this numerous times with the same results and really want to avoid restricting the height of the image.

It looks to me like the editor is adding a height to the image when you upload a new one and obviously my iPhone specific CSS is not scaling the height down accordingly.

Any ideas for a fix?


Urban River, 6 years ago

Having tested it in more detail the editor is adding a height attribute even though my initial code didn't include a height setting. 

Another reason I didn't want a height setting is that our top header images are quite long and when the email first loads and the images aren't displayed by default, the written content is right at the top of the page.  Which is perfect.  As soon as I replace the default image with a new one the image is given a height which then pushes my written content down the page forcing a large blank space when image aren't loaded in.

I'm not sure if there is a fix for this other than a change to the editor.  If anyone from CM can advise that would be great.

p.s. love the new editor it's insanely great!

roshodgekiss roshodgekiss, 6 years ago

Hi Urban River, sorry for the late response here. If you're still experiencing this issue, could you kindly contact our support team with campaign/template details? If it is the template editor that's making mischief here, we'll certainly look at providing a timely fix.

Thank you so much for your kind words - we're really hoping that we can make it even better from here on in :D

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

I'm looking at the same problem...
Did you get this fixed?

roshodgekiss roshodgekiss, 6 years ago

Hi wearethedeckers, the solution is to explicitly scale the height of the image proportional to width in your mobile stylesheet. For example, if the width of the image on a mobile device is 50% of what it is when viewed on the desktop, then you would change the height in your mobile stylesheet like so:

img[class="screenshot"] { width: 325px !important; height: 50%; }

We purposefully specify the height in the HTML when importing images to the editor, to prevent ugliness in Outlook. Let us know how you go :)

Get in touch with us on Twitter:
We're also on Facebook:

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