如何使图像大小适应 html table 中的行高

Question

我正在尝试制作一个强大的 html 签名以在 Thunderbird 中使用。我所说的健壮是指它不仅在 Thunderbird 中看起来正确，而且在我发送邮件的其他邮件客户端中也必须正确。例如，我使用 Gmail 对此进行了测试。

布局很简单，大概是这样的：

此致

|皮埃卡·格罗贝拉尔

| 082 111 0000

|皮卡@mycompany.co.za

“PPP”是一张图片（公司标志）。所以我想通过使用 1 行 2 列 table 并将图片放在第一个单元格中，将文本放在第二个单元格中来实现此布局。

现在，我可以以像素为单位设置图像大小，但这是有问题的，因为不同的邮件客户端以某种方式处理字体大小不同（这可能是因为 Thunderbird 在发送邮件之前打包邮件的方式 - 谁知道呢？）。但我想保持徽标与其旁边的三行相同的高度。

所以，我希望 table“拉伸”到第二个单元格中 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 和 table 上的 width 并且只有一个 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>

希望这些提示对您有用。

如何使图像大小适应 html table 中的行高

How to make image size adapt to row height in an html table

html

css

thunderbird

image

css-tables