Make img height 100% of td

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.

Answers


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>

Try making the height of the cell a percentage instead of pixels in css. Like how Jezen Thomas said, use css but this time do it like this.

td {border: 4px solid red; height: /*height in desired percentage*/%; valign:top;}
img {height: 100%; width: 100%;}‚Äč 

Plus formatting webpages or email in just tables is bad practice. You should try to do it entirely in css and use tables only for tabular data. But since it's what you want to do I am not going to stop you.

Is it ok if you get the rest of the html so I can show the proper css way to do it if you are interested?


Never use div's in emails, gmail and android does not support this.

Its not possible for at image to have a 100% height or width in an e-mail. You have to type the exact size in px. Its pretty annoying


Need Your Help

Display dynamically added Multi Array elements

php

I have a javascript which creates two types of elements.

Add button to toolbar in wpf programmatically

c# wpf button browser

I'm trying to add a bookmark function to my browser but I can't figure out how to add my created button to the toolbar.