1

我正在尝试为活动监视器制作自定义 html 时事通讯。表格宽度为 600 像素。我有 3 列带有文本的图像。每列的宽度为 200 像素，但图像未占用全宽（200 像素）。我希望图像适合该列，并且每列的宽度应为 200 像素。如何解决这个问题？

注意：同样的通讯在 mailchimp 发送的 Outlook 2007 中运行良好。并且请不要在课堂上跑你的头。我已经在媒体查询中使用了这些类，我对此没有任何问题。我在 Outlook 2007 中面临的问题。

展望 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>

4

1 回答 1

0

事实上，您的背景图片并没有出现在 Windows 10 邮件应用程序中。

要在 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>

于 2020-06-11T08:46:09.253 回答