View Full Version : Outlook - what's with the image stretching?

Mar 12th, 2008, 09:06 PM
Either this is weird, or I'm stupid. Possibly both.

I realise that posting about a HTML display issue in Outlook 2007 is like complaining that the band sucks on the Titanic, but anyway:

Has anyone else tried stretching an image in Outlook? Like, the normal technique of: you've got a uniform region (say, a vertical border) so you slice an image 1px high and then tell it to be 300px high in the HTML.

Only I'm trying to run a HTML email through Outlook and... it's consistently shrinking them. Down to about 30px high. I mean.. I could understand it not displaying them at all, or even popping up an alert that these images aren't Microsoft-approved and thus might steal my children... but shrinking the display size??


Mar 12th, 2008, 09:38 PM
can you post what u put in your e-mail, like the code? I like the titanic refrence too!!

Mar 13th, 2008, 12:35 PM
Ok: try this. I'm using Outlook 2007 (12.0.6300.5000)

First, the image I'm using: 37px by 1px.


So. Given Outlook's known HTML issues, I've gone for the oldschool whack-it-in-a-table approach. Basic table, with image height set to 550px.

<table cellpadding="0" cellspacing="0" border="0" width="500">
<td width="37" height="550" valign="top"><img src="http://www.capsule01.com/email/anorak/mar08/img/border_left.jpg" width="37" height="550" border="0" /></td>
<td width="463" valign="top"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque euismod nunc vel pede. Nulla sapien purus, dictum quis, consectetuer sed, laoreet vel, ipsum. Pellentesque suscipit vulputate lorem. Cras sed lacus. Nullam pellentesque magna at quam. Fusce faucibus ligula sed urna. Morbi consectetuer dignissim urna. Nulla facilisi. Nulla tincidunt nunc ornare mauris. Aliquam massa. Proin vitae turpis in dui fringilla cursus. Nunc gravida dolor nec mauris. Aenean vehicula. Etiam lacinia urna convallis dui. Maecenas fermentum cursus nunc.</p>
<p>Quisque non massa et arcu pharetra varius. Nulla nunc. Pellentesque non tortor. Nunc dictum cursus lacus. Nullam quis nunc in quam adipiscing egestas. Ut vitae magna. Nam sit amet turpis. Ut fermentum justo eget turpis. Nullam tristique sollicitudin quam. Etiam diam dui, blandit at, scelerisque sed, egestas sed, urna. Phasellus nec nisl. Donec accumsan, leo sed consectetuer accumsan, massa justo imperdiet risus, id tristique quam est in lorem. Pellentesque hendrerit ullamcorper tellus. Aenean tempus purus sed risus. Aliquam est sapien, commodo sit amet, gravida sed, varius sit amet, pede. Nulla ligula.</p></tr>

I've tried sending just the code above. I've tried sending it inside the most basic <html>, <head> and <body> tags. I've tried sending it with a succession of HTML and XHTML Strict and Transitional doctypes. The result is, without fail, an email that looks like this:


I've tried setting heights with CSS. I've tried setting different heights. I've tried setting a bg image on the table cell, both in HTML and CSS - of course, Outlook will strip those out entirely. I've tried this with both GIF and JPG versions: the same thing happens.

Finally, I've sent myself an email containing just the following:

<img src="http://www.capsule01.com/email/anorak/mar08/img/border_left.jpg" width="37" height="550" border="0" />

What appears? The same image as above - my 1px jpg, stretched out to about 30-40px high.

Now... someone is going to come along, get to the end of this post, and go "well of course it's doing that. You need to x the y", and I'm going to look a numpty. But until then, I'm stumped*. :confused:

*and resorting to using an image that's actually 550px high...

Mar 13th, 2008, 07:37 PM
Why don't you just use a background color?

Mar 13th, 2008, 07:43 PM
Cos then I'd need two columns, neither of which actually contain any content. That seemed a bit inefficient to me. Mind, considering the amount of time I've spent trying to debug it, it would have been quicker :D

That's still a workaround to the issue, though, rather than an understanding of why Outlook is doing it in the first place.

Feb 24th, 2009, 02:59 PM

I've had this problem too. I have no idea why Outlook does this, but you may find that if you replace your jpg with a gif, the problem may not occur.

I thought that I had found this as a work-around for my problem, however I am no encountering the same problem when the gif is stretched over 1300(ish) pixels. Crazy, there doesn't seem to be any logic behind it.

Feb 17th, 2012, 10:43 PM
Possibly related (though way late, and not a solution) - I noticed you set your image to 37px wide... does it render with a height of 37px as well?

I'm currently experiencing an issue where outlook (2010) has taken a rectangular image i'm using and squared off the dimensions, so that my logo (originally 264x90) displays in the email I'm sending stretched vertically at 95x95 px...

Not sure if you ever found your answer, but maybe the issues are related!

Feb 17th, 2012, 11:11 PM
Microsoft-approved and thus might steal my children...

I don't have much to say other than that made me almost snort soda out my nose in a fit of joy (& I'm a MS guy :P)- was not prepared for that, and immediately I got a perfect visual in my head :) But I think that Apostropartheid's idea of background color would make your life the easiest (trying to make my inane post at least have some positive point)

Edit: Oops... I didn't realize this was a post form 2008- sry for bumping with an pointless post :eek: