
0
Right and Left Space Around Full Width Image in Outlook 2013
I can't see why it renders like this.

This is my original code.
<!-- CSS -->
img{
font-size:14px;
line-height:16px;
color:#6C6C6C;
display:block !important;
border:0 !important;
overflow:visible;
}
<!-- HTML -->
<table width="100%" style="border-spacing:0;">
<tr aria-hidden="true">
<td align="center" style="padding:0;font-size:0;line-height:0;">
<a href="#VALUE#" style="text-decoration:none;" target="_blank" tabindex="1">
<div class="owa">
<img src="#VALUE#" alt="#TITLE#. " style="width:100%;height:auto;max-width:600px;max-height:100px;" class="img"/>
</div>
</a>
</td>
</tr>
</table>
Once it goes through Outlook 2013, this is how the code is changed.
<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 width="100%" style='width:100.0%;border-collapse:collapse;mso-yfti-tbllook:1184;border-spacing:0'>
<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes' aria-hidden=true>
<td valign=top style='padding:0in 0in 0in 0in'>
<div>
<p class=MsoNormal align=center style='text-align:center;line-height:0%'>
<span style='font-size:1.0pt;font-family:"Calibri",sans-serif; mso-fareast-font-family:Arial;color:#333333'>
<img border=0 id="_x0000_i1026" src="http://fpoimg.com/600x250" style='height:auto;max-width:600px;width:100%' alt=". " class=img><o:p></o:p>
</span>
</p>
</div>
</td>
</tr>
</table>
Thoughts?
Outlook 2013 has a hard time dealing with
width:100%;
on images. It usually won't mean what you think it means. Instead, it's best advised to keep the HTMLwidth
attribute to set the width of your image for Outlook, then use amax-width:100%
for the image to become responsive.Also, make sure your email is ready for 120 dpi rendering in Outlook. (See this or this for more infos on 120 dpi rendering.)
Hey Remi,
Thanks for the suggestion. It didn't work though. Any other suggestions?
Here is the whole code.
I would add a class that makes an image full width on mobile, i.e:
.fullwidth {
width: 100%;
height: auto;
display: block;
}
Then set an actual width on the image:
<img src="$source" width="600" height="300" style="display: block;" border="0" alt="$alt-text" class="fullwidth" />
I always do it this way and have never had an issue :)