当我从活动监视器测试我的自定义 html 时事通讯时，列图像在 outlook 2007 中未占据全宽

Question

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

注意：同一通讯在 outlook 2007 从 mailchimp 发送时运行良好。 请不要在课堂上动脑筋。 我在媒体查询中使用了这些类，我没有问题。 我在 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>