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

Question

I am trying to make a custom html newsletter for campaign monitor. Table width is 600px. I have 3 columns of images with text. Each column has a 200px width but images are not taking full width(200px). I want the images fit in the column and should take 200px width for each column. How to solve this?

Note: Same newsletter is working well in outlook 2007 sent from mailchimp. And please don't run your head on classes. I have used the classes in media queries and I have no problem with it. The problem I am facing in 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

In fact your background images didn't appear neither on Windows 10 Mail app.

For this to work on Win10 mail you need to provide image sizes in Points rather than Pixels.

Can't test on Outlook 2007 but the code below will work on Win 10 Mail so it may also be your answer.

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