通过DPI缩放阻止Outlook 2013中的HTML电子邮件缩放 [英] Prevent Images in HTML Email Scaling Up With DPI Scaling, Outlook 2013
问题描述
在Outlook 2013中查看时，我设计和构建的HTML电子邮件存在一个非常烦人的问题.当DPI缩放比例设置为中等(125％)"的用户使用该问题时，该问题就会出现，这会使我的所有图像变为125即使标签上设置了宽度和高度，标签的样式和容纳图像的标签上的宽度和高度也应超出它们的百分比.
I have a very annoying issue with an HTML email I have designed and built when viewed in Outlook 2013. The issue arrises when a user with DPI Scaling set to 'Medium (125%)', and it makes all my images 125% larger than they should be, even though the width and height are set on the tag, in the style of the tag and on the tag that houses the image.
我的代码:
<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 x 31px，应为25px x 25px.
The image above displays at 31px by 31px, when it should be 25px by 25px.
有人知道要解决这个问题吗?
Does anyone know a work around for this?
谢谢.
*编辑* 添加了一个图表以更好地显示问题.
* EDIT * Added a diagram to better show the issue.
桌子保持相同的宽度，但是图像增加并破坏了布局.
The tables stay the same width, but the images increase and break the layout.
推荐答案
DPI缩放比例进行了以下更改:
DPI Scaling makes the following changes:
-
在HTML属性中指定的宽度和高度仍然是像素值.
Widths and heights specified in HTML attributes remain pixel values.
VML代码中指定的宽度和高度保留为像素值.
Widths and heights specified in VML code remain pixel values.
要解决这些问题，
在表格上使用内嵌样式和px单位. 您需要使用属性为Gmail定义高度.然后使用px内联定义高度和宽度.具有基于百分比的宽度的表不需要任何处理，因为它们已经很好地缩放了.
Use inline styles and px units on tables. You'll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don't need any treatment, as they scale well already.
<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进行细胞间隔和细胞填充.
使用这些内联样式将允许您创建可缩放的单元格间距和单元格填充.
Using these inline styles will allow you to create scalable cellspacing and cellpadding.
<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>
这篇关于通过DPI缩放阻止Outlook 2013中的HTML电子邮件缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
