如何使圖像大小適應 html 表中的行高

Question

我正在嘗試制作一個強大的 html 簽名以在 Thunderbird 中使用。 健壯是指它不僅在 Thunderbird 中看起來正確，而且在我發送郵件的其他郵件客戶端中也必須正確。 例如，我用 Gmail 對此進行了測試。

布局很簡單，大概是這樣的：

此致

< PPPPPP > | 皮卡·格羅貝拉

< PPPPPP > | 082 111 0000

< PPPPPP > | pieka@mycompany.co.za

“PPP”是一張圖片（公司標志）。 因此，我想通過使用 1 行 2 列的表格並將圖片放在第一個單元格中並將文本放在第二個單元格中來實現這種布局。

現在，我可以以像素為單位設置圖像大小，但這是有問題的，因為不同的郵件客戶端以不同的方式處理字體大小（這可能是因為 Thunderbird 在發送之前打包郵件的方式 - 誰知道？）。 但我想保持徽標與其旁邊的三行相同的高度。

因此，我希望表格“拉伸”到第二個單元格中 3 行的高度，然后我希望圖像將自身拉伸到行的高度，同時保持其縱橫比。

所以，這是基本框架（我認為）：

<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>

我必須添加什么來獲得我想要的行為？

Answer 1

經典方式：為避免圖像被納入尺寸計算，需要通過position:absolute; .

要將其調整為行的height ，請在position:relative;中設置父td ； 所以它成為參考。 height:100%基本上是從哪里開始。

table-layout:fixed and a width on table ，只有一個td會完成設置。 em 是一個更易於管理以適應平均最大文本長度的值。

這是一個可能的例子來展示這個想法。 內聯樣式應該理解

 <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>

希望這些提示對您有用。