在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.

Answer 1

<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!

Answer 2

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.