Editable img "height: auto;" broken in Gmail

I've been trying to work on a really simple fluid template that has a repeater layout that has an <img editable> tag. In my stylesheet, I've got the following defined:

img {
  display: block;
  height: auto !important;
  max-height: auto !important;
  max-width: 100%;
  -ms-interpolation-mode: bicubic;

When viewing one of these emails online in Gmail, when shrinking the browser window horizontally, the images do not keep their aspect ratio and become squished.

For example, when uploading this image in the content editor, it looks like this:


When I view the source from Gmail's "Show original", I can see that there is a height value defined on the <img> element:

<img width=3D"1024" src=3D"http://i1.cmail2.com=
/ei/t/3F/69D/533/csimport/QGXfT1CkRpmvlwtPpgul_IMG_0558.094521.jpg" label=
=3D"Picture" height=3D"682" alt=3D"Image&#32;test" style=3D"display:block=
;height:auto !important;max-height:auto !important;max-width:100%;-ms-int=
erpolation-mode:bicubic;" />

When I use my browser's inspector and delete the height attribute, the image's aspect ratio gets corrected and then the image fluidly responds to browser window width changes.

I tried using the solution in this thread but it only works with images whose content never changes in a template, not for images that we upload to CM in the content editor.

Any ideas on how to fix this?

davidaf davidaf, 2 years ago

Hi benryyip,

At this point, I'm not sure it's possible to accomplish with an editable image, as we do automatically add the height to the image that you upload during editing, and as you've seen, gmail doesn't pay much attention to the CSS you are trying to use to override it.

I did test with your code in gmail, and it did actually look fine in many browsers, but it was definitely not consistent: http://cm.d.pr/1hPQb/52uuepBp

You would probably need to instead hard-code the image in rather than make it editable, I'm afraid, to ensure that the height tag isn't defined.

The Campaign Monitor Blog – HTML email smarts to go with your good looks
benryyip, 2 years ago

Hi davidaf,

Thanks for the reply! Yeah, when I tested it, Gmail in a small horizontal window was the only one that was giving me problems. I probably will just go with smaller width images for now so that when it squishes it won't be as bad.

About hard-coding the image: is there a way to hard code and image and still upload it to CM's side? Or do I have to either import it with the template or host it myself?

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free