html - 如何使图像大小适应html表格中的行高
问题描述
我正在尝试制作一个强大的 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>
我必须添加什么来获得我想要的行为?
解决方案
经典方式:为避免图像被纳入尺寸计算,您需要将其从流量中取出position:absolute;
。
将其调整为 row 的大小,height
使父级成为参考。基本上会从哪里开始。td
position:relative;
height:100%
table-layout:fixed
并且只有一个width
会完成设置。em 是一个更易于管理以适应平均最大文本长度的值。table
td
这是一个可能的例子来展示这个想法。内联样式应该理解
<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>
希望这些提示对您有用。
推荐阅读
- c# - 使用 AngleSharp 和 CSS 选择器的 C# Web 抓取知识面板/Google 页面
- reactjs - 单击 BrowserRouter 链接时隐藏全屏导航
- amazon-web-services - 在 Django 项目中,使用 Aws Congnito 身份验证时如何对 Graphql API 进行身份验证?
- html - 有没有办法让渐变背景图像超出实际图像?
- .htaccess - 从 url 中删除逗号 (%2C)、撇号 (%27)、冒号 (%3A)
- etl - 如何通过 Informatica PowerCenter 从文件名中提取多个值作为多列数据?
- ios - 我已将 Widgetkit 添加到我的应用程序中,但现在当应用程序在 Xcode 12 beta 上启动时在 iOS 13 上崩溃
- testing - 空手道软件 - 如果条件在 0.9.6 中不起作用,则很简单
- unit-testing - “zef 测试。” 返回与使用 raku -Ilib 运行某些测试不同的结果
- postgresql - PostgreSQL如何编写存储过程以从表中获取名字和姓氏