当我从广告系列监控器测试我的自定义html新闻时，Outlook 2007中的列图像没有完全显示宽度

Question

我正在尝试为广告系列监视器制作自定义html新闻。表格宽度为600像素。我有3列带有文字的图片。每列的宽度为200像素，但图像的宽度不为200像素。我希望图像适合该列，并且每列的宽度应为200px。该如何解决？

[注意：同一邮件通讯在mailchimp发送的Outlook 2007中运行良好。而且，请不要在课堂上费力。我已经在媒体查询中使用了这些类，但是我没有问题。我在Outlook 2007中面临的问题。

<table width="600" class="hp" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
         <!--[if mso]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px; height:192px;>
            <v:fill type="tile" src="https://i.imgur.com/sNVCXJg.jpg" color="#000080"/>
         <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
            <![endif]-->
            <div>
               <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                     <td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
                        <font face="'Roboto', Arial">Chicken</font>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
                        <font face="'Montserrat', Arial">From</font>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
                        <font face="'Roboto', Arial">$10.99</font>
                     </td>
                  </tr>
               </table>
            </div>
            <!--[if mso]>
         </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
      <td width="200" height="192" class="mob-column" background="https://i.imgur.com/DAQXLs7.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/DAQXLs7.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
         <!--[if mso]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px; height:192px;>
            <v:fill type="tile" src="https://i.imgur.com/DAQXLs7.jpg" color="#000080"/>
         <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
            <![endif]-->
            <div>
               <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                     <td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
                        <font face="'Roboto', Arial">Fish</font>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
                        <font face="'Montserrat', Arial">From</font>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
                        <font face="'Roboto', Arial">$10.99</font>
                     </td>
                  </tr>
               </table>
            </div>
            <!--[if mso]>
         </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
      <td width="200" height="192" class="mob-column" background="https://i.imgur.com/s9isrA4.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/s9isrA4.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
         <!--[if mso]>
         <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px; height:192px;>
            <v:fill type="tile" src="https://i.imgur.com/s9isrA4.jpg" color="#000080"/>
         <v:textbox style="mso-fit-shape-to-text:true;" inset="0,0,0,0">
            <![endif]-->
            <div>
               <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                     <td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
                        <font face="'Roboto', Arial">Noddles</font>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
                        <font face="'Montserrat', Arial">From</font>
                     </td>
                  </tr>
                  <tr>
                     <td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
                        <font face="'Roboto', Arial">$10.99</font>
                     </td>
                  </tr>
               </table>
            </div>
            <!--[if mso]>
         </v:textbox>
         </v:rect>
         <![endif]-->
      </td>
   </tr>
</table>

Answer 1

实际上，您的背景图像在Windows 10 Mail应用程序中都没有出现。

要使此功能适用于Win10邮件，您需要提供以磅为单位而不是像素的图像大小。

无法在Outlook 2007上测试，但是下面的代码将在Win 10 Mail上工作，因此也可能是您的答案。

   <table width="600" class="hp" border="0" cellspacing="0" cellpadding="0">
   <tr>
  <td width="200" height="192" class="mob-column" background="https://i.imgur.com/sNVCXJg.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/sNVCXJg.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
     <!--[if mso]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 150pt; height: 144pt;" src="https://i.imgur.com/sNVCXJg.jpg" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute;width: 150pt; height: 144pt;">
<v:fill  opacity="0%" color="#000080"  />
<v:textbox inset="0,0,0,0">
<![endif]-->
        <div>
           <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                 <td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
                    <font face="'Roboto', Arial">Chicken</font>
                 </td>
              </tr>
              <tr>
                 <td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
                    <font face="'Montserrat', Arial">From</font>
                 </td>
              </tr>
              <tr>
                 <td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
                    <font face="'Roboto', Arial">$10.99</font>
                 </td>
              </tr>
           </table>
        </div>
        <!--[if mso]>
     </v:textbox>
     </v:rect>
     <![endif]-->
  </td>
  <td width="200" height="192" class="mob-column" background="https://i.imgur.com/DAQXLs7.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/DAQXLs7.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
     <!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 150pt; height: 144pt;" src="https://i.imgur.com/DAQXLs7.jpg" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute;width: 150pt; height: 144pt;">
<v:fill  opacity="0%" color="#000080"  />
<v:textbox inset="0,0,0,0">
<![endif]-->
        <div>
           <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                 <td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
                    <font face="'Roboto', Arial">Fish</font>
                 </td>
              </tr>
              <tr>
                 <td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
                    <font face="'Montserrat', Arial">From</font>
                 </td>
              </tr>
              <tr>
                 <td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
                    <font face="'Roboto', Arial">$10.99</font>
                 </td>
              </tr>
           </table>
        </div>
        <!--[if mso]>
     </v:textbox>
     </v:rect>
     <![endif]-->
  </td>
  <td width="200" height="192" class="mob-column" background="https://i.imgur.com/s9isrA4.jpg" align="left" style="width:200px; height:192px; background-image:url('https://i.imgur.com/s9isrA4.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;" bgcolor="#000080">
     <!--[if mso]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 150pt; height: 144pt;" src="https://i.imgur.com/s9isrA4.jpg" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute;width: 150pt; height: 144pt;">
<v:fill  opacity="0%" color="#000080"  />
<v:textbox inset="0,0,0,0">
<![endif]-->
        <div>
           <table width="100%" class="hp" border="0" cellspacing="0" cellpadding="0" align="center">
              <tr>
                 <td style="padding:42px 20px 32px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:15.43px; text-transform:uppercase; line-height:23.145px; text-align:center; color:#ffffff;" class="fallback-text-r">
                    <font face="'Roboto', Arial">Noddles</font>
                 </td>
              </tr>
              <tr>
                 <td style="padding:0px 20px 0px 20px; color:#cac8c6; font-family:'Montserrat', Arial; font-weight:900; font-size:10.29px; line-height:15.435px; text-align:center; color:#ffffff;" class="fallback-text-m">
                    <font face="'Montserrat', Arial">From</font>
                 </td>
              </tr>
              <tr>
                 <td style="padding:0px 20px 42px 20px; font-family:'Roboto', Arial; font-weight:900; font-size:25.89px; line-height:38.835px; text-align:center; color:#ffffff;" class="fallback-text-r">
                    <font face="'Roboto', Arial">$10.99</font>
                 </td>
              </tr>
           </table>
        </div>
        <!--[if mso]>
     </v:textbox>
     </v:rect>
     <![endif]-->
  </td>
   </tr>
</table>