auto stretch or even repeat img inside td on en edm (html email)

Question

I've a problem during making an edm (html email). The code can be found here jsfiddle.net/4Mss8/

The problem was the img in the img tags won't extend (stretch) to the max td height among columns in an android gmail client but it was fine in any edge browser. Since the middle td's height was dynamic because the content inside was not fixed and the height of the middle td was very device resolution dependent so I cannot use a fixed height's "side frame" on the left and right side.

Does anyone get some suggestion on how to fix it so that it's compatible in almost major browsers (web mail) and email clients?

I'm testing the html email using http://putsmail.com/

Thanks.

Answer 1

I recommend using table cell background which is supported in more clients.

So instead of:

  <td width="43px" height="100%">
   <img src="http://i839.photobucket.com/albums/zz314/hkhuman1/img_zpsb130160c.png" style="border: 0px; display: block;width:43px;height:100%" border="0">
  </td>

Use this:

  <td width="43px" height="100%" background="http://i839.photobucket.com/albums/zz314/hkhuman1/img_zpsb130160c.png">&nbsp;</td>

For completeness, I'd recommend against using the CSS style background-image (although technically its the most flexible choice) for now as it is not supported by Hotmail/Outlook.com.