Make img height 100% of td

css html-table html-email

16,323

I assume you're mostly running into trouble in Outlook?

Hotmail doesn't recognize background images, but it does seem to recognize height="100%."
In my own tests, declaring height="100%" on an image, does successfully stretch it to the height of the cell in the major web-based clients (Hotmail, Gmail, Yahoo).
Outlook only allows image stretching to a fixed size (and the image can only be stretched proportionately in both directions). The other clients allow significant stretching in one direction (up to ~4000% of the original size?)

Tips:

1) Use a tall image sized to fit Outlook, or slightly taller.

2) Using height="100%" will still stretch the image as needed in most non-Outlook clients.

3) Declaring a vertically repeating background image for the table cell is also useful as a fallback (but it won't help you with Outlook or Hotmail.)

Here is my preferred solution for border images:

<td width="25" height="100%" valign="top" style="background:Transparent url('http://www.mysite.com/images/side-left.jpg') repeat-y;margin:0; padding:0;">
    <img style="margin:0; padding:0;display:block;" src="http://www.mysite.com/images/side-left.jpg" alt="border" width="25" height="100%" />
</td>

16,323

Author by

kristina childs

Graphic designer (print & web), front-end developer, DJ. Scotch lover, music blogger, cyberpunk reader, vinyl toy collector, anime watcher, Trekkie, xbox abuser & a damn good cook.

Updated on June 22, 2022

Comments

kristina childs almost 2 years

I'm creating an HTML email and since background images can't be used on anything but <body> thought I could get around this by making a border image 100% height within a cell. Perhaps it was wishful thinking? I've searched at the solutions that worked in the past no longer work in modern browsers. Is there any special trick to making this happen without setting a hard height for the cell?

Here are the things I've tried so far:

<td width="25" style="margin:0; padding:0;">
    <img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</td>

stretches the image to 100% height of the entire table (even though the table is nested in a <td>.

<td width="25" height="100%" style="margin:0; padding:0;">
    <div style="height:100%; diplay: block;">
        <img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
    </div>
</td>

ditto

<td width="25" height="1" style="margin:0; padding:0;">
    <div style="height:100%; diplay: block;">
        <img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
    </div>
</td>

setting a smaller td size does not force it to stretch as expected.

kristina childs almost 12 years

i thought of this, but my math skills are not so great in this department. 100% does not work since it makes it 100% of the total table height. but with a header and footer, what percentage would work without ending up being either too large or too small? example: header=320px high, footer=111px high and internal body copy roughly 1000px high (before email clients do their proprietary rendering). i wish you could write algebraic equations for css! 100% – 413px = height
DrinkJavaCodeJava almost 12 years

Can you show all your html and css please so I can help you better.
kristina childs almost 12 years

It's above; the actual table dims don't matter. It's a formula, right? I suppose the real question would be: Is it really possible to have a percentage that works for a dynamic cell? I don't think it is.
kristina childs almost 12 years

uh... tables is the ONLY way html emails should be written. divs and p tags should only be used for styling purposes. Anyone who says otherwise is not keeping up-to-date with cross compatibility or standards.
kristina childs almost 12 years

that's not true at all. microsoft is the only real odd one out here. 100% height works just fine in entourage, gmail, apple mail and every other sane client. outlook and hotmail are the only ones holding up rich html emails. divs should never be used for structure, but regardless, i was posting the things i have already tried. this answer is not helpful in the slightest.
kristina childs over 11 years

outlook and hotmail, yes. in order for html email to be worth anything they need to display the same in all clients. outlook 2010 and hotmail do not display any sort of background in divs, tables or cells, including vertically repeating ones, so this isn't a real solution. the only way to do it thus far i've found is to declare a hard size for the image, but this presents it's own problems. line-height is rendered differently on outlook - about double the size of other clients - so if you make the height fit outlook it will leave tons of empty space on gmail, yahoo, apple, entourage, etc.
Mac over 11 years

The advantage of redundantly using an image tag and an image as a background style is that you can cover more situations. If you define a fixed image height that looks good in Outlook and Hotmail for example, you can use the background image in the table cell to fill the extra space in the clients that support it (Gmail, Yahoo, etc...) To minimize significant whitespace variation in your email body, never use tags. Always use or or image spacers.
kristina childs over 11 years

it doesn't matter if it's a or a . the problem is the LEADING (ie line-height). outlook renders line-height in a non-standard way, so the default line-height on entourage is half the default line-height on outlook. if you put in a hard line-height (say 1.5em) it will still render significantly differently (about double). because of this, if you make the border imgs tall enough to fit outlook (which can't render bg imgs) you end up with a ton of blank space in entourage. not ideal. the inverse is needed - a hard img for gmail and bg for outlook, but as we know, this won't work either.
kristina childs over 11 years

basically i'm looking for a bulletproof option, but it doesn't seem like there is one. at least for now. please, microsoft, for the love of god don't use the word remdering engine for email and browser clients!! for pete's sake it's 2012!
Mac over 11 years

You've summed it up accurately. You're stuck saving an image sized to fit Outlook. You can stretch to fit other clients where the message is taller. This leaves you with extra white-space if the message is shorter.
Mac over 11 years

I'd recommend looking for ways to minimize that white-space variation in your message body to 20-30 pixels. Using px instead of em may achieve slightly more consistent behavior in Outlook. p tags are still dangerous unless you are explicitly defining the margin and padding inline. Outlook only notices line-height style definitions in block-level, not line-level tags. If none of that helps, try breaking your text up into separate table cells and enforce the cell height with spacer images. Sorry I can't be more help!
kristina childs over 11 years

even though there isn't an acceptable resolution for this problem i'll mark your answer as correct. you should at least be rewarded for effort :)
Mac over 11 years

:) Well thank you. I'm sorry I didn't have a better answer!
user1751825 about 8 years

The "since it's what you want to do" statement is a classic. Nothing about email templates is about doing what you want to do. It's about doing what you have to do to keep your clients happy, and doing what works in Outlook. Support for CSS in email clients is woeful to non-existent, and it's not getting any better.