我正在尝试制作一个强大的 html 签名以在 Thunderbird 中使用。我所说的稳健是指它不仅在 Thunderbird 中看起来正确，而且在我向其发送邮件的其他邮件客户端中也必须正确。例如，我使用 Gmail 进行了测试。
布局非常简单，大概是这样的：
此致
|皮卡·格罗贝拉尔
| 082 111 0000
|[电子邮件受保护] /cdn-cgi/l/email-protection
“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 >[email protected] /cdn-cgi/l/email-protection</p>
</td>
</tr>
</table>
我必须添加什么才能获得我想要的行为？
经典方式：
为了避免图像被纳入尺寸计算，您需要通过以下方式将其从流程中取出position:absolute; .
将其大小调整为height的行，作为父级td in position:relative;所以它成为参考。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>[email protected] /cdn-cgi/l/email-protection</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>[email protected] /cdn-cgi/l/email-protection</p>
</td>
</tr>
</table>
希望这些提示对您的问题有用。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
