Question

我正在尝试发送包含图片的HTML电子邮件。所有电子邮件客户端的图片看起来都不错，但在展望中它们太宽了。如何修复图像的最大宽度？

    <table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
   <tbody>
      <tr>
         <td align="center">
            <div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

无论CSS支持或HTML属性如何，导致Outlook中出现问题的主要因素是图像的实际大小。 Outlook通常会忽略任何HTML大小调整（width =或height =）或CSS样式（width：，height :)并取消teh图像中的嵌入信息。这完全基于DPI设置以及Word HTML引擎的渲染。

Mailchimp solutions

以下是从here

更详细地解释该问题的摘录

“当您使用96dpi以外的图片时，通常会发生此问题。

插入图片时，Outlook会将图像重新缩放，就好像它是96dpi图像一样。这意味着如果你有150dpi的图片，高度为88px，它将显示为56px高的图像; 88px / 150dpi * 96dpi = 56px

它甚至变得更糟;在发送时，Outlook将使用新尺寸永久地将图像转换并压缩（重新渲染）到96dpi！这意味着所有“详细”图片信息都会丢失，您将发送96dpi的图像，该图像高56px。这当然是严重且非常明显的质量损失。

如果您的图片小于96dpi，则会发生相反的情况。 88px高，dpi为32的图像将导致96dpi高达264px的图像。因此，结果将是一个非常大的图像（但这次你可以重新调整它，而不会使图像变得模糊）。

这是一个长期未解决的问题/功能/设计选择，从1993年开始一直追溯到Word 6.0。“

Answer 2

要为Outlook设置图像的最大宽度，我添加宽度=＆＃34; 600＆＃34;属性为img标签。请注意，该大小缺少px，px不起作用且必须在img标记上，而不是任何父元素。

E.g。

<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />

在侧面但相关的注释我在600宽度表中使用宽度为280的并排图像。这是因为Outlook添加了填充（或者可能是边距），如果你将它们都设置为300，它们就会叠加。

Answer 3

max-width is not a supported CSS style in Outlook 2007。（显然，float都不是。）Outlook因提供非常有限的CSS支持而臭名昭着。

您最好的解决方案是在HTML属性中指定较小的宽度（和高度）：

 <td align="center">
    <div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
 </td>

Answer 4

一些事情，我不会在你的电子邮件代码中使用浮动等，也会删除那个包装div，而电子邮件设备你真的必须使用简单的表格标记。还要尽量避免像p标签之类的东西，因为它们会产生额外的空间等。

对于您的实际问题，我尝试这样的事情，我会在我的图片上设置一个高度，然后{i} {/ p>

display:block

Answer 5

我参加聚会有点晚了（通过Google在这里获得）。什么对我有用，而我在答案中没有看到，是针对Outlook的条件注释。

他们是这样工作的：

<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
  <tbody>
    <tr>
      <td>
        <img align="center" alt="" src="[image source here]" width="[desired width here]">
      </td>
    </tr>
  </tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

您在这里所做的基本上是将图像表包装在另一个具有固定宽度的表中，但仅适用于Outlook。

MailChimp提供了很好的参考，如果您遇到Outlook问题，应该检查一下：https://templates.mailchimp.com/development/css/outlook-conditional-css/

希望这对某些Google员工有所帮助！

Outlook中的图像宽度太宽

5 个答案: