Images getting cut off in Outlook 2007/2010

Question

Images lost the top row of pixels, but only in certain situations. Example markup:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td valign="top" height="20">
            <div style="line-height:0;"><img src="http://path.to/image.png" alt="" height="20" width="25" /></div>
        </td>
    </tr>
</table>

I was under the impression that since <img> is an inline element, it should be contained inside a block level element. That's why I wrapped my <img> in <div>. But this caused a problem where the text under-hang caused my <div> to be too tall. So I set line-height to 0 as a workaround.

No matter what height or valign I set on the <td> or the <img>, the top of the image is still cut off. I found that removing the line-height was the answer. Why is this?

I will use display: block on my <img> tags in the future.

silverninja. That was a typo, it never appeared in my markup. Fixed. @Ashan - here's an example of what [it should look like](http://i.imgur.com/amfZM.png?1) and [how it's showing up](http://i.imgur.com/dQM4k.png?1). Notice the differences in the win more games, the tons of uses, and in the 'what people are saying', which is getting completely cut off. — steve, Jun 27 '12 at 01:45
Hmmm, even as whacky as Outlook can be, an image in a cell should work right. I think you may be overthinking things - have you tried just placing the image in the ``, without the `
`? Also, try removing the 'valign' and 'height' attributes on the ``. — chipcullen, Jul 16 '12 at 13:56

score 3 · Accepted Answer · edited Jul 21 '12 at 02:15

<div>s get treated differently depending on the email client you're using. The IE of email clients is AOL (but, who uses that anymore). I think chipcullen is right that you're over thinking it a bit. Why put in more code than necessary. Give this a try (no line reaks within the TD):

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

Or if you really must define heights:

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="20" style="height:20px;line-height:20px;"><img src="http://path.to/image.png" alt="" height="20" width="25"></td>
    </tr>
</table>

Hope that helps!

chipcullen was right. I specify display: block on my images instead, and they come out great now. — steve, Nov 20 '12 at 04:21

score 3 · Answer 2 · answered Oct 14 '14 at 11:16

This occurs in Outlook when a very long image is inserted in a campaign. The limit for image length is approximately 1728px tall. Outlook will clip the excess off the top of images taller than 1728px.

If you cannot decrease the size of your image to under 1728px tall, the best alternative is to crop the image into separate images. If using a drag and drop template, you can then add multiple Image blocks to the campaign to upload each part of the image. To ensure the images appear as one fluid image, navigate to the Settings tab for each Image block and select the Edge To Edge check box under Margins.

Images getting cut off in Outlook 2007/2010

2 Answers2

Linked