Outlook中的图像大于表格宽度答案

【问题标题】：Image larger than table width in outlookOutlook中的图像大于表格宽度
【发布时间】：2015-08-07 15:47:06
【问题描述】：

我创建了一个流畅的电子邮件模板，它在任何地方都能很好地工作，期待在 Outlook 中。基本结构在我的流体表周围包裹了一个仅限外观的表。

// table to keep everything at 580 for outlook
<!--[if (gte mso 9)|(IE)]>
  <table width="580" align="center" cellpadding="20" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">
    <tr>
      <td>
<![endif]-->

     // fluid table up to 960px
    <table class="content" align="center" cellpadding="20" cellspacing="0" border="0" style="width:100%!important; max-width:960px;border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">

     // image is 960px wide 
     <tr><td><img src="myimage.jpb"></td></tr>

    </table>

<!--[if (gte mso 9)|(IE)]>
      </td>
    </tr>
</table>
<![endif]-->

我遇到的问题是 Outlook 没有将 960 像素的图像调整为 580 像素，它只是扩展了表格，所以我得到了水平滚动条。有什么方法可以强制将图片大小调整为 580px，但仅适用于 Outlook？

【问题讨论】：

标签： responsive-design outlook html-email

【解决方案1】：

Outlook 会根据自己的算法调整图像大小，而不是实际基于 HTML 或 CSS 声明。像往常一样，Outlook 是一个令人叹为观止的表亲，它的意思很好，但只会让其他人的事情变得更加困难。

最好的办法是将图像本身调整为 580 像素。这应该有助于最大程度地减少 Outlook 造成的损害，因为它通常引用图像的实际大小，而不是您在 HTML 或 CSS 中声明的大小。

有时将定义的值设置为宽度或高度属性会起作用，但您需要这样做不带引号（例如宽度=300）。不知道为什么会这样，但有时它会将其限制在正确的比例。

【讨论】：

我无法定义宽度，因为它会比 Outlook 中包含的表格更大。
不确定您的意思，但我的意思是将图像本身的大小更改为在桌面上显示的最大尺寸（580 像素？）。 Outlook 通常会超出实际图像大小，而不一定是声明的大小。
我的最大尺寸是 960 像素 - 我正在尝试创建一个时事通讯，它对于支持的客户最高可达 960 像素，对于 Outlook 最高可达 580 像素。
如果您需要 960 像素的图像大小，您需要 1.) 将 Outlook 大小增加到 960 像素宽，或 2.) 使用条件代码在 Outlook 中显示不同的 580 像素图像，同时隐藏 960 像素的图像。