Question

我目前正在开发一些自定义响应式电子邮件模板，这些模板将在我的客户Mailchimp中使用。（是的，斗争是真实的..）过去的一周我一直试图找出为什么Outlook以原始大小显示我的图像。

正如您在下面的代码片段中看到的，我已经为我的img，td和tr设置了宽度。还试图将它添加到表中，没有任何区别。因此，即使我已经设置了固定，在Outlook中，图像仍以原始大小显示，这导致布局变为sh * t。

    <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中的图像功能？我也愿意忘记流畅的电子邮件，只有2个宽度用于移动，1个用于桌面。

哦，最后但并非最不重要的，是的，我确实谷歌了，我想我过去一周几乎每篇关于响应式电子邮件设计的博客/文章都已经过了。

提前感谢您的帮助！

Answer 1

Outlook使用MS Word渲染引擎，所以它会给你带来麻烦。 Im Mailchimp您不仅可以选择内联样式，还可以创建标题css表，并附带@media-screen响应规则。

就Outlook而言，您应该在html电子邮件模板中添加两项内容：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

这告诉电子邮件＆＃34;嘿，必要时使用MS Office Schema。

然后在标题CSS中的所有这些：

#outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
    }
    .ExternalClass{
        width:100%;
    }
    .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
        line-height:100%;
    }
    a img{
        border:none;
    }
    img{
        display:block;
    }

ExternalClass将帮助显示您要引用的Outlook使用Microsoft呈现引擎。关于这个主题here，有一个非常好的指南来自Mailchimp。

祝你好运！

编辑：很多东西都会在你的模板中破坏。我为你开始了一个基本的Mailchimp模板并修复了一些问题。检查代码段。

Codepen

请注意，这仍然没有响应。因为您没有包含任何代码来实现它。您想要为表格，TD宽度和图像添加完整的主体样式。

Answer 2

这将解决您的问题：

<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />

没有显示：块;有时会发生在图像下方有1px的间隙。

最大宽度：100％;防止您的图像比容器大。宽度：100％很有用，因为图像将获得容器的宽度。

您应该将width属性设置为精确的宽度（以像素为单位）。

我观察到如果我将width属性与max-width一起使用：100％;然后它将在基于Word的Outlook上正确呈现。如果没有max-width，将应用原始宽度。（在基于Word的Outlook上。）

Answer 3

解决方案是使用没有像素的HTML高度和宽度属性。

所以

<img src="..." height="200" width="600" />

然后，对于移动设备，您可以使用媒体查询。这意味着您可以使用视网膜图像或任何您想要的其他内容。我建议您使用srcset用于视网膜图像，因为Outlook等会忽略它们并下载您的电子邮件而不下载大量额外图像。

您可以在此处找到更多信息：

https://litmus.com/community/discussions/1007-outlook-image-sizes

Outlook以原始大小显示图像

3 个答案: