How To Make Image Size Adapt To Row Height In An Html Table

I am trying to make a robust html signature to use in Thunderbird. By robust I mean it must look right not just in Thunderbird, but in other mail clients that I send the mail to. I

Solution 1:

Classic way : to avoid image to be taken into size calculation , you need to take it out of the flow via position:absolute; .

to size it to the height of the row , make the parent td in position:relative; so it becomes the reference. height:100% will basicly be where to start from.

table-layout:fixed and a width on table and only one td will finish the setting. em is a value easier to manage to fit average max text length.

Here is a possible example to demonstrate the idea. Inline style should be understood

<table style="table-layout:fixed;width: 20em;border:solid;margin:auto">
  <tr>
    <td style="position:relative;width:40%">
      <p>
        <img style="position:absolute;max-width:100%;max-height:100%;top:0;" src="https://dummyimage.com/400">
        <!-- demo img is a 1:1 ratio you need to tune table and td widthS -->
      </p>
    </td>
    <td>
      <p>Pieka Grobbelaar</p>
      <p>082 111 0000 </p>
      <p>pieka@mycompany.co.za</p>
    </td>
  </tr>
</table>
<hr>
<table style="table-layout:fixed;width: 20em;border:solid;margin:auto">
  <tr>
    <td style="position:relative;width:40%">
      <p>
        <img style="position:absolute;max-width:100%;max-height:100%;top:0;" src="https://dummyimage.com/300x400">
        <!-- demo img is a 1:33 ratio you need to tune table and td widthS -->
      </p>
    </td>
    <td>
      <p>Pieka Grobbelaar</p>
      <p>082 111 0000 </p>
      <p>CSS Land</p>
      <p>pieka@mycompany.co.za</p>
    </td>
  </tr>
</table>

hope these hints work for you issue.