Scale an image on the fly inside

Question

I am sending an HTML email that contains an image with cfmail. In summary the code looks like this:

<cfmail from="me@email.com" to="user@email.com" subject="My Subject" type="html">
    <img src="http://www.mywebsite.com/images/my_image.jpg" style="height:120px;" alt="My Image" />
</cfmail>

As you can see, I set the CSS height attribute to 120px. In the browser, this scales the image to 120px high and automatically determines the proportionate width. In email, at least in Outlook 2007, it does nothing. The image appears with its original height and width.

I'm sending from a ColdFusion9 box, so I've tried using cfimage without any luck, but it's likely I'm just doing something wrong. Any way to resize this image in the email on the fly? Thanks!

have you tried `height="120"` instead of `style="height:120px;"`? — MikeM, Feb 20 '12 at 18:09

score 4 · Accepted Answer · edited Feb 20 '12 at 20:51

4

Outlook 2007/2010 doesn't like css style="height:150px" however the following will function

<img src="...." height="150">

Outlook doesn't play nicely with CSS, and in general you need to fall back to ugly inline styles such as <img height="120">. Here's a nice reference table showing what each email client does and doesn't support.

In there you can see height is not supported in CSS in Outlook 2007/2010 despite it being supported in 2003. That's progress for you! The TLDR version is simply that so much css breaks in Outlook that it's rather depressing!

edited Feb 20 '12 at 20:51

Leigh

28,765
10
55
103

answered Feb 20 '12 at 18:39

Simon at The Access Group

6,932
22
45

Hmm... That's disappointing. Ok, so CSS is out. What about resizing with ColdFusion? – Nick Petrie Feb 20 '12 at 18:53
Well it's not entirely out, the height="" inline setting is still valid, so `` – Simon at The Access Group Feb 20 '12 at 18:55
I had read somewhere that that wouldn't work, but after testing, it appears it does. If you want to create a new answer and drop in your suggestion, I'll vote you up. Thanks! – Nick Petrie Feb 20 '12 at 20:36
1

Figured it more useful in the long run to add it into my original answer so that the reference link is in there too – Simon at The Access Group Feb 20 '12 at 20:46

Scale an image on the fly inside

1 Answers1