如何使图像大小适应HTML表格中的行高 [英] How to make image size adapt to row height in an html table
问题描述
我正在尝试制作一个强大的html签名以在Thunderbird中使用.健壮的意思是，它不仅必须在Thunderbird中，而且在我将邮件发送到的其他邮件客户端中都必须看起来正确.例如，我使用Gmail进行了测试.
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:
最好的问候
<< PPPPPPPP>|皮卡·格罗贝拉(Pieka Grobbelaar)
< PPPPPPPP > | Pieka Grobbelaar
<< PPPPP>|082111 0000
< PPPPPPPP > | 082 111 0000
<< PPPPPPPP>|pieka@mycompany.co.za
< PPPPPPPP > | pieka@mycompany.co.za
"PPP"是图片(公司徽标).因此，我想通过使用1行2列的表格并在第一个单元格中放置图片，在第二个单元格中放置文本来实现这种布局.
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.
现在，我可以设置图像大小(以像素为单位)，但这是有问题的，因为不同的邮件客户端以不同的方式处理字体大小(这可能是因为Thunderbird在发送之前打包邮件的方式-谁知道?).但是我想使徽标的高度与其旁边的三行相同.
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.
因此，我希望表拉伸"(stretch)表.到第二个单元格中3条线的高度，然后我希望图像在保持其纵横比的同时将自身拉伸到该行的高度.
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?
推荐答案
经典方式:为了避免将图像带入尺寸计算中，您需要通过 position:absolute; .
Classic way :
to avoid image to be taken into size calculation , you need to take it out of the flow via position:absolute; .
将其调整为该行的 height 的大小，在 position:relative; 中设置父 td ，使其成为参考. height:100％基本上是从哪里开始.
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 和 table 上的 width ，只有一个 td 将完成设置.em是一个更易于管理的值，以适合平均最大文本长度.
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.
这篇关于如何使图像大小适应HTML表格中的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
