Question

我在Outlook 2013中查看时设计和构建的HTML电子邮件有一个非常恼人的问题。当DPI Scaling的用户设置为“中（125％）”时，问题就出现了，并且它使我的所有图像都成为125尽管宽度和高度设置在标签上，标签的样式和容纳图像的标签上，但它们应该大于它们的百分比。

我的代码：

<td align="right" valign="top" class="socialIcon twitter" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 25px; height: 25px; padding-right: 8px;">
<a href="https://twitter.com/company" target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<img src="http://www.example.com/email-campaigns/images/twitter-icon.png" width="25" height="25" alt="Follow us on Twitter" style="border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: 25px; height: 25px; display: block;">
</a>
</td>

上图以31px×31px显示，应为25px×25px。

有没有人知道这方面的工作？

感谢。

*编辑* 添加了一个图表以更好地显示问题。

表格保持相同的宽度，但图像会增加并打破布局。

Answer 1

DPI Scaling进行了以下更改：

HTML属性中指定的宽度和高度仍为像素值。
VML代码中指定的宽度和高度仍为像素值。
其他像素值（px）转换为点（pt）值。这是问题出在哪里。

要解决这些问题，

在表格上使用内联样式和px单位。 对于Gmail，您需要使用属性定义高度。然后使用px定义内联的高度和宽度。具有基于百分比的宽度的表不需要任何处理，因为它们已经很好地扩展。

<table>
  <tr>
    <td height="500" style="width: 500px;height: 500px;">
    </td>
  </tr>
</table>

将此添加到您的代码中以使VML缩放。

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

<head>
<!--[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

将MSO Magic用于cellspacing和cellpadding。

使用这些内联样式将允许您创建可伸缩的cellspacing和cellpadding。

<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>

Answer 2

无法控制此操作或将其作为发件人进行操作。图像大小基于图像的DPI和最终用户计算机上显示设置的DPI。这使得无法为此构建，除非您完全确定收件人将在他们的计算机上设置的DPI。

您最好的选择是让它缩放，只需调整您的设计即可随着增加而扩展。执行此操作的最佳方法是将两列中的任何内容设置为具有设置值的TD（当需要表堆栈响应设计时使用条件mso），因为这也应该缩放，使得它基本上等于有人只是放大在你的电子邮件上这将有助于保持比例，而不是仅扩大电子邮件的部分内容。

有关如何处理Outlook dpi缩放的一些参考点：

关于Acid的电子邮件：https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013

Litmus：https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013

Answer 3

您可能希望创建一个匿名版本，通用文本，图片等。这有助于您和其他后续跟进问题的人...就像我今天遇到类似问题一样......

使用DPI Scaling扩展HTML电子邮件中的图像，Outlook 2013

3 个答案: