Question

我目前正在创建一个电子邮件模板，但其中一个图片未在outlook中正确显示，无论我咨询多少教程来修复缩放问题。

预览如下所示;

所有其他客户的电子邮件;

Outlook 2010中的电子邮件;

这让我非常疯狂，我已经手动编码了下面的内容，因为自己生成的所有东西似乎都不起作用。图像宽度我手动尝试为600px，内联样式为宽度：600;现在100％ - 根本没有修复..

任何帮助都非常受欢迎！＆LT; 3

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>

Answer 1

我有两种可能的解决方案（根据假设前景打破嵌入图像）：

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


键：HKEY_CURRENT_USER \ Software \ Microsoft \ Office \ version \ Outlook \ Options \ Mail

值名称：使用文档发送图片

值：0

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

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

同样值得尝试指定height本身的width（以及<image>），因为已知Outlook的引擎会根据情况调整图像。不指定两者。这些尺寸必须与图像的实际尺寸相同（适用于width）。

Outlook 2010正在调整HTML电子邮件的大小，但不是图像

2 个答案: