HTML Outlook 忽略图像的 td 宽度

Question

我知道以前有人问过这种类型的问题，但那里给出的解决方案并没有为我提供解决方案。

我希望<td>具有70%的宽度，但是插入的图像正在推动Outlook中收到的电子邮件的宽度(我使用MS Outlook Pro 2013)。我不想使用单位px，因为这无法覆盖所有屏幕宽度。一种解决方案可能是使用<div>而不是<td>，但我被告知<div>并非在所有地方都正确支持。请指教。

.HTML

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
<tbody>
<tr>
<td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
<td style="width: 30%;"><h1>Example txt</h1></td>
</tr>
</tbody>
</table>

我的尝试

1. 我用<p>标签包裹了<img>
2. 我为<td>添加了display: inline-block
3. 我为<td>和<img>添加了属性width和height
4. 我为<img>添加了width: 100%和height: auto

Answer 1

好消息是 Outlook 不支持@media查询，因此您可以覆盖需要在电子邮件中使用的任何设置值。

Outlook 倾向于忽略图像宽度的内联样式。假设您想要 600px 宽的电子邮件，并且您的图像是 400px，请像这样编写宽度：

<img src="example.jpg" width="400" style="width: 70%; height: auto;" />

您应该注意的其他一些事情是，框大小在大多数电子邮件客户端中不起作用。border-radius不适用于 Outlook。

• https://www.campaignmonitor.com/css/box-model/box-sizing/
• https://www.campaignmonitor.com/css/box-model/border-radius/

祝你好运。