4

我正在创建一个 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尺寸不会强制它按预期拉伸。

4

3 回答 3

0

我假设您主要是在 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>
于 2012-08-19T19:47:18.730 回答
-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 方法吗？

于 2012-06-21T21:11:36.753 回答
-5

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

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

于 2012-07-02T11:25:27.403 回答