Question

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

Answer 1

我认为你在Outlook中遇到了麻烦？

Hotmail无法识别背景图片，但似乎确认身高=“100％”。
在我自己的测试中，在图像上声明高度=“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>

Answer 2

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

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

在表格中加上格式化网页或电子邮件是不好的做法。您应该尝试在css中完全执行此操作，并仅将表用于表格数据。但既然这是你想做的事情，我不会阻止你。

如果你得到其余的html，这样可以，所以如果你感兴趣，我可以展示正确的css方式吗？

Answer 3

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

图像在电子邮件中不可能具有100％的高度或宽度。您必须在px中键入确切的大小。它非常讨厌

使img高度为td的100％

3 个答案: