Outlook 2010 正在调整 HTML 电子邮件而不是图像的大小答案

【问题标题】：Outlook 2010 is resizing HTML email but not imageOutlook 2010 正在调整 HTML 电子邮件而不是图像的大小
【发布时间】：2016-03-20 05:28:17
【问题描述】：

我目前正在创建一个电子邮件模板，但其中一张图片无法在 Outlook 中正确显示，无论我参考了多少教程来解决缩放问题。

预览如下所示；

所有其他客户端中的电子邮件；

Outlook 2010 中的电子邮件；

这让我快疯了，我在下面手动编码了，因为所有自生成的东西似乎都不起作用。我手动尝试的图像宽度为 600px，内联样式为 width:600；现在 100% - 根本没有修复..

非常感谢任何帮助！

HTML 电子邮件；

<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]-->



<style type="text/css">

table {border-collapse:separate;}

a:hover {text-decoration: underline;}

.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}

.ExternalClass {width: 100%;
}

a {
    text-decoration: none;
color: #606060 !important;
word-wrap: break-word;
}

a:hover {text-decoration: underline;}


h1{
        color:#202020;
        font-family:Helvetica;
        font-size:26px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }
 h2{
        color:#202020;
        font-family:Helvetica;
        font-size:22px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }
 h3{
        color:#202020;
        font-family:Helvetica;
        font-size:20px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }
 h4{
        color:#202020;
        font-family:Helvetica;
        font-size:18px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }


 </style>

 </head>


 <body width="600" style="background-color:#fafafa;">


 <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="text-align: center; background-color: white; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px;width: 600px;" >
 <tbody>
 <tr>
 <td style="padding-left: 18px;padding-bottom: 9px;color: #656565;font-family: Helvetica;font-size: 12px;text-align: left; width: 400px; background-color:#fafafa;" valign="top" width="400">

                        Podcast updates from Liberty Entrepreneurs.
 </td>
 <td style="padding-right: 18px;padding-bottom: 9px;color: #656565;font-family: Helvetica;font-size: 12px;text-align: right;width: 200px; background-color:#fafafa;" valign="top" width="200">
 <a href="*|ARCHIVE|*">View this email in your browser</a>
 </td>
 </tr>
                        <!-- BEGIN HEADER IMAGE // -->
 <tr>
 <td colspan="2" width="600"  style="width: 600px;  margin: auto;">
 <img alt="Liberty Entrepreneurs" style="width:100%; min-width:100% !important; margin: auto;" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/9b764c71-111e-4ef2-8792-d9a223a7da3b.jpg" width="100%">
 </td>
 </tr>


                        <!-- BEGIN COLUMNS // -->
 <tr>
 <td colspan="2" valign="top"  style="width: 600px;" width="600">

 <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="text-align: center; background-color: white; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px; width: 600px;" >
 <tbody>
                        <!-- BEGIN LEFT COLUMN // -->
 <tr>
 <td width="200" valign="top" style="width: 200px; ">
                            <!-- BEGIN LEFT MENU NAV // -->
                       <a href="http://libertyentrepreneurs.com/">             <img alt="home" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/8836768d-61cf-4687-9598-37bc518b2cd9.jpg" style="width: 200px;" width="200"></a><br>

                         <a href="http://libertyentrepreneurs.com/podcasts/">  <img alt="podasts" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/ee8755e0-000d-48bd-adb8-851c1a7497fa.jpg" style="width: 200px;" width="200"></a><br>

                          <a href="http://libertyentrepreneurs.com/about/">        <img alt="about-us" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/3078d9ff-01ec-431d-a9eb-e9024f371498.jpg" style="width: 200px;" width="200"></a><br>

                           <a href="http://libertyentrepreneurs.com/affiliates/">        <img alt="affiliates" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/49888d30-b006-4d1b-8e85-18286f16252e.jpg" style="width: 200px;" width="200"></a><br>
                <!-- // END LEFT MENU NAV -->

             <br>
    <!-- BEGIN LEFT MENU SOCIAL ICONS // -->
 <table align="center" style="mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px;">
 <tbody>
 <tr>

 <td ><a href="https://www.facebook.com/LibertyEntrepreneurs"><img alt="facebook" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/c390cefe-929f-49cc-aa83-8906f2541988.jpg"></a></td>

    <td ><a href="http://feeds.soundcloud.com/users/soundcloud:users:179898940/sounds.rss"><img alt="rss" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/bb275fe4-7220-4814-bf68-c644a973f7ce.jpg"></a></td>

 <td >
 <a href="https://twitter.com/libertyepodcast">
 <img alt="twitter" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/38a2439b-b92b-47be-952c-69d3acab18fd.jpg"></a></td>

 </tr>
 <tr>

 <td >
 <a href="https://www.youtube.com/channel/UCwVUvM9zHMtfFebUpRMn2iA">
 <img alt="youtube" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/94a00983-d179-4d53-8ed6-2cfdb7b043ba.jpg"></a></td>

 <td >
 <a href="https://plus.google.com/113882469509229437540">
 <img alt="google" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/debb5fb8-f62f-488a-b19a-425e11b54b39.jpg"></a></td>

<td >
<a href="mailto:info@libertyentrepreneurs.com">
<img alt="email" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/2e84304b-9dce-47a6-b10b-7b8831f0f5e6.jpg"></a></td>

</tr>
</tbody>
</table>
 <!-- // END LEFT MENU SOCIAL ICONS -->

 <!-- BEGIN LEFT MENU DONATION BUTTONS // -->

 <h3 style="text-align: center;font-family: Open Sans;color: #f7931d;"><span style="color: #f7931d;"><strong>Donate $1 with Altcoins</strong></span></h3>

 <a href="https://shapeshift.io/shifty.html?destination=18S1ggqLUdVFzUNbmYcthnG3S8WSYP1ShA&output=BTC&apiKey=e6c44e9af4ec65d0bdce028b4b984f43a0bf519f9c984a3005190068354285606cea430cb7d81c21e1aca85b8e8e93115db1d65d4c057dd84318f0f6529a6009&amount=$1" target="_blank" >
 <img width="144px" align="middle" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/3a605f6d-c526-4c68-93dd-791f8296ee88.png" style="width: 144px;" >
 </a>
 <br>
 <br>

 <a href="https://itunes.apple.com/us/podcast/liberty-entrepreneurs-podcast/id1057809945?mt=2" target="_blank">
 <img width="144px" align="middle" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/dcb329f4-124a-47ba-aeb6-63fa995d93d3.png" style="width: 144px;" >
 </a>
 <br>

  <!-- // END LEFT MENU DONATION BUTTONS -->

 <br>

  <!-- BEGIN LEFT MENU RECENT ARTCLES // -->

  <h3 style="font-family: Helvetica;font-style: normal;font-weight: bold;letter-spacing: -1px;text-align: center;color: #606060 !important;">
 <center>Recent Articles:</center>
 </h3>
 <p style="text-align: left;">*|RSS:RECENT|*</p>

 <!-- // END LEFT MENU RECENT ARTCLES -->
    </td>

                            <!-- BEGIN RIGHT COLUMN // -->
 <td width="400" valign="top" style="width: 400px;">
 <br>

                        *|RSSITEMS:|*
 <h3 class="mc-toc-title" style="margin: 0;padding: 0;display: block;font-family: Helvetica;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: -1px;color: #606060 !important;">&gt;<a href="*|RSSITEM:URL|*" target="_blank">*|RSSITEM:TITLE|*</a></h3>
 <em>By *|RSSITEM:AUTHOR|* on *|RSSITEM:DATE|*</em><br>
 *|RSSITEM:CONTENT_FULL|*<br>
  <a href="*|RSSITEM:URL|*" target="_blank">Read in browser &raquo;    </a><br>
    *|RSSITEM:TWITTER|* *|RSSITEM:LIKE|*<br>
   <br>
  *|END:RSSITEMS|*

 </td>
 <!-- // END RIGHT COLUMN -->
 </tr>
 </tbody>
 </table>

 </td>
 </tr>

 <tr>
    <!-- BEGIN FOOTER SOCIAL ICONS // -->
 <td colspan="2" style="padding-top: 10px; padding-bottom: 10px; margin: auto; border-top: 2px solid #eaeaea; width: 600px; background-color:#fafafa;" width="600">
                                                                              <a target="_blank" href="https://www.facebook.com/LibertyEntrepreneurs"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-48.png"></a>

 <a target="_blank" href="http://feeds.soundcloud.com/users/soundcloud:users:179898940/sounds.rss"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-rss-48.png"></a>

 <a target="_blank" href="https://www.twitter.com/libertyepodcast/"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-48.png"></a>

 <a target="_blank" href="https://www.youtube.com/channel/UCwVUvM9zHMtfFebUpRMn2iA"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-youtube-48.png"></a>

 <a target="_blank" href="https://plus.google.com/113882469509229437540"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-googleplus-48.png"></a>

 <a target="_blank" href="mailto:info@libertyentrepreneurs.com"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-forwardtofriend-48.png"></a>

 </td>
                                <!-- // END FOOTER SOCIAL ICONS -->
 </tr>


 </tbody>
 </table>

 </body>
 </html>

【问题讨论】：

澄清一下，这是在您发送电子邮件后发生的吗？就像电子邮件在您发送之前正确呈现一样？
是的，请在 Outlook 呈现 HTML 之前查看预览：freshlondon.biz/testing/libertyentrepreneurs/…

标签： html css email outlook

【解决方案1】：

我有两种潜在的解决方案（基于前景正在破坏嵌入图像的假设）：

默认情况下，Outlook 会重新嵌入图像，无论您如何放置他们在。所以你可以更改以下注册表设置。

密钥：HKEY_CURRENT_USER\Software\Microsoft\Office\version\Outlook\Options\Mail

值名称：随文档发送图片

值：0

这应该迫使 Outlook 尊重您的超链接图像，并且可能会解决问题。
以 96dpi 渲染图像。正如我上面提到的，outlook 似乎重新嵌入了图像。似乎希望它们为 96dpi，因此将其转换（通常会导致问题）。如果您将图像嵌入为正确的 dpi，则前景可能不会在转换时破坏它。

【讨论】：

第二部分对于任何发送营销电子邮件的人来说都是很好的知识。谢谢

【解决方案2】：

我看到您尝试将min-width 分配给图像本身的位置，但您是否尝试将其分配给父级<tr> 或<td>？

<tr>
    <td colspan="2" width="600"  style="width: 600px;  margin: auto; min-width: 600px;">
        <img alt="Liberty Entrepreneurs" style="width:100%; min-width:100% !important; margin: auto;" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/9b764c71-111e-4ef2-8792-d9a223a7da3b.jpg" width="100%">
    </td>
</tr>

还值得尝试指定<image> 本身的height（以及width），因为众所周知，如果您不同时指定两者，Outlook 的引擎会根据需要调整图像。这些尺寸必须与图片的实际尺寸相同（您正确使用了 width）。

【讨论】：