使 img 高度为 td 的 100%答案

【问题标题】：Make img height 100% of td使 img 高度为 td 的 100%
【发布时间】：2012-06-24 01:05:04
【问题描述】：

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

将图像拉伸到整个表格的 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 大小不会强制它按预期拉伸。

【问题讨论】：

标签： css html-table html-email

【解决方案1】：

尝试将单元格的高度设置为百分比而不是 css 中的像素。就像 Jezen Thomas 所说的，使用 css 但这次是这样。

td {border: 4px solid red; height: /*height in desired percentage*/%; valign:top;}
img {height: 100%; width: 100%;}

另外，在表格中格式化网页或电子邮件是不好的做法。您应该尝试完全在 css 中完成，并且仅将表格用于表格数据。但既然这是你想做的，我不会阻止你。

如果您获得其余的 html 是否可以，如果您有兴趣，我可以展示正确的 css 方法吗？

【讨论】：

我想到了这个，但我的数学能力在这个部门不是很好。 100% 不起作用，因为它是 table 总高度的 100%。但是对于页眉和页脚，有多少百分比会起作用而不会导致太大或太小？例如：header=320px high, footer=111px high and internal body copy 大约 1000px 高（在电子邮件客户端进行专有渲染之前）。我希望你能为 css 写代数方程！ 100% – 413px = 高度
能否展示您所有的 html 和 css，以便我更好地帮助您。
在上面；实际的桌子变暗无关紧要。这是一个公式，对吧？我想真正的问题是：真的有可能有一个适用于动态单元格的百分比吗？我不认为是。
呃...表格是唯一应该编写html电子邮件的方式。 divs 和 p 标签只能用于样式目的。任何说其他话的人都没有跟上交叉兼容性或标准。
“既然这是你想做的”这句话是经典的。电子邮件模板与做你想做的事无关。它是关于做你必须做的事情来让你的客户满意，并做在 Outlook 中有效的事情。电子邮件客户端中对 CSS 的支持简直糟糕透顶，而且也没有好转。

【解决方案2】：

永远不要在电子邮件中使用 div，gmail 和 android 不支持。

电子邮件中的图片不可能有 100% 的高度或宽度。您必须以 px 为单位输入确切的大小。很烦人

【讨论】：

这根本不是真的。微软是这里唯一真正奇怪的。 100% 高度在随行人员、gmail、苹果邮件和其他所有理智的客户中都可以正常工作。 outlook 和 hotmail 是唯一支持富 html 电子邮件的。 div 永远不应该用于结构，但无论如何，我发布的是我已经尝试过的东西。这个答案丝毫没有帮助。

【解决方案3】：

我假设您在 Outlook 中遇到的大部分问题？

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

提示：

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

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

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>

【讨论】：

outlook 和 hotmail，是的。为了使 html 电子邮件物有所值，他们需要在所有客户端中显示相同的内容。 Outlook 2010 和 hotmail 不会在 div、表格或单元格中显示任何类型的背景，包括垂直重复的背景，因此这不是真正的解决方案。到目前为止，我发现的唯一方法是为图像声明一个硬尺寸，但这会带来它自己的问题。 line-height 在 Outlook 上的呈现方式不同 - 大约是其他客户端大小的两倍 - 所以如果你让高度适合 Outlook，它将在 gmail、雅虎、苹果、随行人员等上留下大量空白空间。
冗余使用图片标签和图片作为背景样式的好处是可以覆盖更多的情况。例如，如果您定义在 Outlook 和 Hotmail 中看起来不错的固定图像高度，您可以使用表格单元格中的背景图像来填充支持它的客户端（Gmail、Yahoo 等）中的额外空间以最小化电子邮件正文中的显着空格变化，切勿使用
标签。始终使用或
或图像间隔。
不管是
还是
。问题是领先的（即行高）。 Outlook 以非标准方式呈现 line-height，因此 entourage 上的默认 line-height 是 Outlook 上默认 line-height 的一半。如果你输入一个硬线高（比如 1.5em），它仍然会以不同的方式呈现显着（大约双倍）。因此，如果您使边框 imgs 足够高以适合前景（无法渲染 bg imgs），您最终会在随行人员中留下大量空白。不理想。需要反过来 - gmail 的硬 img 和 Outlook 的 bg，但正如我们所知，这也行不通。
基本上我正在寻找一个防弹选项，但似乎没有一个。至少现在。拜托，微软，看在上帝的份上，请不要为电子邮件和浏览器客户端使用“remdering engine”这个词！看在皮特的份上，现在是 2012 年！
你总结的很准确。您无法保存大小以适合 Outlook 的图像。您可以拉伸以适应消息较高的其他客户端。如果消息较短，这会给您留下额外的空白。