html - 使用纯 HTML 在电子邮件中并排创建响应式图像

Question

我正在尝试使用纯 HTML 在电子邮件中包含两个图像作为标题。一张图片将覆盖 40% 的屏幕宽度，另一张将覆盖 60% 的宽度(两者的高度都是自动的)。但是，两张图片合并后的最大宽度为 750 像素，因此在大型桌面设备上，合并后的宽度不会超过 750 像素。

我学到了一个技巧，涉及将主要内容前后的 td 宽度设置为 0，这对文本很有效，但对我的图像不太好。这是我的代码:

<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="0"></td>
    <td width="40%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 40%;" /></td>
    <td width="60%" valign="middle"><img src="myimg.png" alt="Text" style="margin: 0; border: 0; padding: 0; display: block; width: 60%;" /></td>
    <td width="0"></td>
</tr>
</table>

And here is how the images should be displayed

不幸的是，代码无法正常工作；图像始终具有固定宽度。我试过删除空的 td，我试过使用固定宽度而不是百分比，我试过单独使用宽度和作为一种样式，我试过将宽度放在不同位置的各种变化，但是似乎无论我尝试什么，我都无法响应地并排显示图像。这是智能手机设备上的一个问题，图像显得太大。当然，我不能使用媒体查询，因为 Outlook 不支持它们。

关于如何响应式并排显示两个图像有什么建议吗？

谢谢!

最好的， 沙威

Answer 1

试试这个。希望对您有所帮助。

<div style="width:750px;">
<table style="width:100%;">
<tr>
<td style="width:40%; background-color: red; height:150px;"></td>
<td style="width:60%; background-color: yellow; height:150px;"></td>
</tr>
</table>
</div>