Outlook以原始大小显示图像

-1

我目前正在研究一些将在我的客户Mailchimp中使用的自定义响应电子邮件模板。（是的，斗争是真实的..）通过一周我一直在试图弄清楚为什么Outlook显示我的图像在他们的原始大小。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>

我也有一个石蕊帐户，它显示了当我使用预览图像时没有错误。

如果我要使用大小为我在属性和样式中定义的图像，则没有问题。但是，因为这是一个使用Mailchimp的客户端，我想要确保即使他上传更大的图像时，所有内容仍然保持原样。

第二个问题是我使用了一些图像作为图标，它们的尺寸是视网膜屏幕的两倍。这里是电子邮件的完整代码jsfiddle而且它还应该是响应式的。所以图像应该适合每个设备/屏幕。

有没有人有一个想法或解决方案，让我回到我的图像在Outlook中的权力？我也愿意忘记流畅的电子邮件，并且只有2个宽度用于移动电话，另一个用于桌面电脑。

哦，最后但并非最不重要的是，我做了谷歌它，我想我已经通过几乎每个博客/文章有关过去一周的响应电子邮件设计。

在此先感谢您的帮助！

来源

2017-01-22 Kevincore

这将解决您的问题：

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

没有显示：块;有时会发生图像下方会出现1px的差距。

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

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

我观察到，如果我使用宽度属性连同max-width：100％;那么它将在基于Word的Outlook中正确呈现。没有最大宽度，将应用原始宽度。（在基于Word的Outlook上。）

来源

2017-01-23 09:13:17

我希望现在好一点。 –

您好@ gyula.nemeth，非常感谢您的意见！不幸的是，我已经尝试过了（在你的文章后也做过了），但仍然是我的图片大于我允许的图片大小，在Outlook中以全角显示。 – Kevincore

我通常在容器表中定义内容的宽度。假设width =“600”。然后我添加width =“100％”到内部表格。我还将宽度=“100”添加到tds。如果我按照我提到的方式放置图像，它们的大小是完美的。 –

Outlook使用MS Word渲染引擎，所以它会给你带来问题。 Im Mailchimp你不仅可以做内联样式，还可以创建一个头部CSS表，以及@media-screen响应规则。

至于展望而言，你应该增加两件事到HTML电子邮件模板：

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

这告诉邮件说“嘿，使用MS Office的架构在必要。

那么这一切在你的头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会帮助你的意思参考使用Microsoft渲染引擎秀观。 Mailchimp有一个非常好的指南，关于这个可用的主题here。

祝你好运！

编辑：很多事情都会打破你的模板。我为你开始了一个基本的Mailchimp模板并修复了一些问题。检查片段。

Codepen

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

来源

2017-01-23 17:08:08 scoopzilla

嘿@scoopzilla感谢您的帮助，非常有用的信息！我已经添加了上面但没有任何区别。很遗憾，我的照片仍然以全尺寸显示。但是我会把它保存在我的模板中，这可能会对一些客户有所帮助。 – Kevincore

看看我在Codepen修改后的答案。如果您有更多的麻烦，请给我留言或标记我。我有一个完整大小的模板，您可以使用。 – scoopzilla

感谢您的codepen，我会尽快检查它！但我确实需要它做出反应。你介意分享你的模板吗？非常感谢您的帮助！非常感激。 – Kevincore

Outlook以原始大小显示图像

回答

相关问题