gpt4 book ai didi

css - 使 img 高度为 td 的 100%

转载 作者:行者123 更新时间:2023-12-04 14:21:10 25 4
gpt4 key购买 nike

我正在创建 HTML 电子邮件,因为背景图像只能用于 <body>。我想我可以通过在单元格内制作一个 100% 高度的边框图像来解决这个问题。也许是一厢情愿?我搜索了过去在现代浏览器中不再有效的解决方案。在不为单元设置硬高度的情况下实现这一点是否有任何特殊技巧?

以下是我迄今为止尝试过的事情:

<td width="25" style="margin:0; padding:0;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</td>

将图像拉伸(stretch)到整个表格的 100% 高度(即使表格嵌套在 <td> 中。
<td width="25" height="100%" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>

同上
<td width="25" height="1" style="margin:0; padding:0;">
<div style="height:100%; diplay: block;">
<img src="http://www.example.com/images/side-left.jpg" width="25" height="100%" alt="border" style="margin:0; padding:0; display: block;" />
</div>
</td>

设置更小的 td size 不会强制它按预期拉伸(stretch)。

最佳答案

我假设您主要是在 Outlook 中遇到麻烦?

  • Hotmail 无法识别背景图片,但它似乎可以识别 height="100%"。
  • 在我自己的测试中,在图像上声明 height="100%"确实成功地将其拉伸(stretch)到主要基于 Web 的客户端(Hotmail、Gmail、Yahoo)中的单元格高度。
  • Outlook 仅允许将图像拉伸(stretch)到固定大小(并且图像只能在两个方向上按比例拉伸(stretch))。其他客户端允许在一个方向上进行显着拉伸(stretch)(高达原始尺寸的约 4000%?)

  • 温馨提示:

    1) 使用尺寸适合 Outlook 或稍高的高图像。

    2) 在大多数非 Outlook 客户端中,使用 height="100%"仍会根据需要拉伸(stretch)图像。

    3) 为表格单元格声明一个垂直重复的背景图像也可用作后备(但它对 Outlook 或 Hotmail 没有帮助。)

    这是我对边框图像的首选解决方案:
    <td width="25" height="100%" valign="top" style="background:Transparent url('http://www.mysite.com/images/side-left.jpg') repeat-y;margin:0; padding:0;">
    <img style="margin:0; padding:0;display:block;" src="http://www.mysite.com/images/side-left.jpg" alt="border" width="25" height="100%" />
    </td>

    关于css - 使 img 高度为 td 的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11144215/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com