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

<tablestyle="table-layout:fixed;width: 20em;border:solid;margin:auto"><tr><tdstyle="position:relative;width:40%"><p><imgstyle="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><tablestyle="table-layout:fixed;width: 20em;border:solid;margin:auto"><tr><tdstyle="position:relative;width:40%"><p><imgstyle="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.