问题
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.
My code:
<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>
The image above displays at 31px by 31px, when it should be 25px by 25px.
Does anyone know a work around for this?
Thanks.
* EDIT * Added a diagram to better show the issue.
The tables stay the same width, but the images increase and break the layout.
回答1:
DPI Scaling makes the following changes:
Widths and heights specified in HTML attributes remain pixel values.
Widths and heights specified in VML code remain pixel values.
- Other pixel values (px) are converted to point (pt) values instead. This is where the problem comes in.
To fix these issues,
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>
Add this to your code to make VML scale.
<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>
Use MSO Magic for cellspacing and cellpadding.
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>
回答2:
There is no way to control this or manipulate it as a sender. The image size is based off the DPI of the image and the DPI of the display setting on the end users computer. This makes it impossible to build for this unless you are absolutely certain on the DPI your recipients will have set on their computer for all time.
Your best bet is to let it scale, and just adjust your design to scale with the increase. The best way to do this is to set anything in two column into TDs with a set value (use conditional mso when want table stack responsive design) as this should be scaled as well, making it so basically it is equal to someone just zooming in on your email. It will help keep it proportional, rather than enlarge only portions of the email.
Some reference points on how to handle outlook dpi scaling:
Email on 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
回答3:
You may wish to create an anonymized version, generic text, pictures, etc. This helps you and the other people who follow up on the issue later... like me today having a similar issue...
来源：https://stackoverflow.com/questions/31860828/prevent-images-in-html-email-scaling-up-with-dpi-scaling-outlook-2013