Resize an image to fit into a table using eMail-compatible HTML

Question

My HTML knowledge is 20 years old and my coding skills are limited to BASIC on the C64 and Scratch, so sorry about the basic question. :)

I'd like to create an email signature:

• with a logo on the left and some text on the right
• where the height of the logo is exactly the height of the text block

How I've been trying to accomplish this

I've used a table for the layout becausemy knowledge of CSS is too minimalI understand CSS isn't widely supported across various eMail clients.

The challenge is that the text part is rendered slightly differently on different devices, and I want the image to resize to perfectly fit the height of the text. Ie I want the height of the table/row be defined by the size/height of the text, and the image to be resized accordingly (keeping the aspect ratio).

I guess the max-height tag might solve this, but it doesn't seem to be supported by GMail on the Web?

Thank you!

Answer 1

Pixel perfection is not achievable these days, due to the sheer number of devices, operating systems, fonts, email clients, and other variables--and nor is it desirable. It's not desirable because each environment has different features and screen sizes that mean that you want to optimise to each different environment, to get the best out of all.

Having said that, your requirements are fairly easy to achieve, within about 95% of the time.

To control text-size, you need to use font-size and line-height. Control default margins, paddings, cellspacing, cellpadding, borders for all elements (there are defaults that are different across different email clients).

If you use a websafe font like Arial, the rendering should be similar across almost every device & OS.

So if your logo is the height you want the text, eg 30px, then you might have the text like so:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td>
      <p style="margin:0;font-size:13px;line-height:15px;">Text</p>
      <p style="margin:0;font-size:13px;line-height:15px;">More text</p>
    </td>
  </tr>
</table>

If you need space between the lines you should be able to do a 2px font-size and line-height. If you need the bottom one to be flush with the bottom, the line-height should be the same as the font-size.

Include the actual code if you want something more specific.