css - 使 img 高度为 td 的 100%

我正在创建 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/

css - 使 img 高度为 td 的 100%

上一篇：wcf - 如何使用 WCF 传输大文件

下一篇：regex - SCORM 2004 时间格式 - 正则表达式？