Css 使img高度为td的100%

我正在创建一封HTML电子邮件，因为背景图像除了

之外不能用于任何东西，所以我想我可以通过在单元格内制作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

大小并不会强制它按预期拉伸。

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

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

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

---

如果你有兴趣的话，我可以给你展示一下正确的css方式，如果你有兴趣的话，你可以下载剩下的html吗？

不要在电子邮件中使用div，gmail和android不支持这一点

at图像在电子邮件中不可能有100%的高度或宽度。

---

你必须用px输入准确的大小。这很烦人，我想你在Outlook中遇到的麻烦最多吧

• Hotmail无法识别背景图像，但它似乎可以识别height=“100%”

• 在我自己的测试中，在一张图像上声明height=“100%”确实成功地将其延伸到主要基于web的客户端（Hotmail、Gmail、Yahoo）中的单元格高度

• Outlook只允许将图像拉伸到固定大小（并且图像只能在两个方向上按比例拉伸）。其他客户端允许在一个方向上进行显著拉伸（高达原始大小的4000%）

提示：

<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>

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>

我想到了这一点，但在这个系我的数学技能不是很好。100%不起作用，因为它使其成为桌子总高度的100%。但是，对于页眉和页脚，在不太大或太小的情况下，有多少百分比是有效的呢？示例：页眉=320px高，页脚=111px高，内部正文副本大约1000px高（在电子邮件客户端进行专有呈现之前）。我希望你能为css写代数方程！100%–413px=高度你能展示你所有的html和css吗？这样我可以更好地帮助你；实际的桌子变暗并不重要。这是一个公式，对吗？我想真正的问题是：是否真的有可能有一个对动态单元格有效的百分比？我不这么认为。嗯。。。表格是编写html电子邮件的唯一方式

divs

和

p

标记只能用于样式设置。任何不这样说的人都无法跟上跨兼容性或标准的最新发展。“因为这是你想要做的”这句话是一个经典。有关电子邮件模板的任何内容都不是做你想做的事情。它是关于做你必须做的事情来让你的客户满意，以及做在Outlook中有效的事情。电子邮件客户端中对CSS的支持是可悲的，甚至根本不存在，而且也没有得到任何改善。这根本不是事实。微软是这里唯一一家真正古怪的公司。100%的高度在entourage、gmail、apple mail和其他所有理智的客户机上都能正常工作。outlook和hotmail是唯一可以存放丰富html电子邮件的。div永远不应该用于结构，但不管怎样，我是在发布我已经尝试过的东西。这个答案毫无帮助。outlook和hotmail，是的。为了使html电子邮件具有价值，它们需要在所有客户端中显示相同的内容。outlook 2010和hotmail不在div、表或单元格中显示任何类型的背景，包括垂直重复的背景，因此这不是一个真正的解决方案。到目前为止，我发现唯一的方法是为图像声明一个硬尺寸，但这会带来它自己的问题。outlook上的行高呈现方式不同，大约是其他客户端大小的两倍。因此，如果您使高度适合outlook，它将在gmail、yahoo、apple、entourage等网站上留下大量空白。冗余使用图像标记和图像作为背景样式的优点是，您可以覆盖更多情况。例如，如果您定义了一个在Outlook和Hotmail中看起来不错的固定图像高度，则可以使用表单元格中的背景图像来填充支持它的客户端（Gmail、Yahoo等）中的额外空间，以最小化电子邮件正文中的显著空白变化，切勿使用标记。始终使用或
或图像间隔符。无论是还是
。问题是引线（即线高度）。outlook以非标准方式渲染线条高度，因此entourage上的默认线条高度是outlook上默认线条高度的一半。如果输入硬线高度（比如1.5em），渲染效果仍然会有很大的不同（大约是原来的两倍）。因此，如果您将边框img设置得足够高，以适合outlook（outlook无法渲染bg img），那么最终将在entourage中留下大量空白。不理想。相反，gmail需要硬img，outlook需要bg，但我们知道，这也不行。基本上我在寻找防弹选项，但似乎没有。至少现在是这样。求你了，微软，看在上帝的份上不要

<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>