Kev*_*ore 5 html outlook email-templates mailchimp
我目前正在开发一些自定义响应式电子邮件模板，这些模板将在我的客户 Mailchimp 中使用。（是的，斗争是真实的..）过去的一周我一直在试图弄清楚为什么 Outlook 以原始尺寸显示我的图像。
正如您在下面的代码片段中看到的，我为 img、td 和 tr 设置了宽度。也尝试将其添加到表中，但没有任何区别。因此，即使我对其设置了固定，在 Outlook 中图像仍然以其原始大小显示，这导致布局变得糟糕。
<body bgcolor="#e8ebee">
<!-- wrapper table -->
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee">
<tr>
<td>
<!-- content1 -->
<table mc:repeatable mc:variant="Section: item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td bgcolor="#FFFFFF">
<table>
<tr width="650" style="width:650px;">
<td style="padding-bottom: 15px; width:650px; max-width:650px;" width="650">
<img mc:edit="article_image" src="my_larger_image.png" alt="" style="width:650px; max-width:650px;" width="650">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end content1 -->
</td>
</tr>
</table>
<!-- end wrapper table -->
</body>
我还有一个 Litmus 帐户，当我使用预览时，它没有显示有关图像的错误。
如果我要使用在属性和样式中定义尺寸的图像，那就没有问题了。但由于这是针对将使用 Mailchimp 的客户，我想确保即使他上传更大的图像，一切仍然保持原样。
第二个问题是我使用一些图像作为图标，这些图像的大小是视网膜屏幕的两倍。这是jsfiddle上电子邮件的完整代码，最重要的是它还应该具有响应能力。因此，图像应该能够很好地适应每个设备/屏幕。
有谁有想法或解决方案可以让我恢复对 Outlook 中图像的控制权？我也愿意忘记流畅的电子邮件，并且只有两种宽度，一种用于移动设备，一种用于桌面设备。
哦，最后但并非最不重要的一点是，是的，我确实用谷歌搜索了它，我想我在过去的一周里浏览了几乎所有关于响应式电子邮件设计的博客/文章。
预先感谢您的任何帮助！
这将解决您的问题：
<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />
不带显示：块；有时图片下方会出现 1px 的间隙。
最大宽度：100%；防止您的图像大于容器。width: 100% 很有用，因为图像将获取容器的宽度。
您应该将宽度属性设置为精确的宽度（以像素为单位）。
我观察到，如果我将 width 属性与 max-width: 100%; 一起使用 然后它将在基于 Word 的 Outlook 上正确呈现。如果没有 max-width，将应用原始宽度。（基于 Word 的 Outlook。）