Outlook中的图像宽度太宽

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解决方案

以下是从此处更详细地解释该问题的片段

"当您使用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 图像的最大宽度，我向 img 标记添加了 Width="600" 属性。请注意，该尺寸缺少 px，使用 px 不起作用，它必须位于 img 标签上，而不是任何父元素上。

例如

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

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