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 test this with Gmail, for example.

The layout is quite simple, it's something like this:

Best Regards

< PPPPPPPP > | Pieka Grobbelaar

< PPPPPPPP > | 082 111 0000

< PPPPPPPP > | pieka@mycompany.co.za

The "PPP" is a picture (the company logo). So I want to achieve this layout by using a 1-row, 2 column table, and by putting the picture in the first cell and the text in the second.

Now, I can set the image size in pixels, but that's problematic because somehow different mail clients handle the font size differently (this might be because of the way the Thunderbird packages the mail before sending - who knows? ). But I want to keep the logo the same height as the three lines next to it.

So, I want the table to "stretch" to the height of the 3 lines in the second cell, and then I want the image to stretch itself to the height of the row, while keeping its aspect ratio.

so, this is the basic frame (I think):


<table>
 <tr >
  <td >
   <p ><img  src ="data:image/png;base64,iVBORw0...."></p>
  </td>
  <td >
   <p >Pieka Grobbelaar</p>
   <p >082 111 0000 </p>
   <p >pieka@mycompany.co.za</p>
  </td>
 </tr>
</table>

What must I add top get the behavior I want?

回答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.

来源：https://stackoverflow.com/questions/62490317/how-to-make-image-size-adapt-to-row-height-in-an-html-table

标签

html

css

image

css-tables

Thunderbird