I work in Marketing Cloud on email template and I have a problem with full-width images in Outlook 2010, 2013 and 2016. I know the solution is to set width and height properties in the <img> tag and then it works fine. A customer doesn't want to look at the code, he wants to put an image on content block into this content area and have a good image in every email client. In the template code I have a commented part ( <!--[if (gte mso 9)|(IE)]> ) with a placeholder image (620×400) for Outlook and it works fine as well (in other clients there is a full-width content area for an image 1920×800). But the question is – is it possible that customer put in this content area an image and it will work fine in mso (it shows a smaller image, not necessarily full-width) and this bigger one for other clients?
Here's a part of code from a template with this full-width-content-area:
<!-- start of FULL-WIDTH IMAGE-->
<!--[if (gte mso 9)|(IE)]>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" height=30 width=620>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="line-height:0px">
<img src="http://via.placeholder.com/620x400" style="display:block;width:100%">
</td>
</tr>
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" height=30 width=620>
</table>
</td>
</tr>
<tr>
<td class="body-table-spacing" align="center" valign="top">
<table class="container-frame" border="0" cellpadding="0" cellspacing="0" align="center">
<![endif]-->
<!--[if !((gte mso 9)|(IE))]><!-->
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
<table class="full-width-spacer" border="0" cellpadding="0" cellspacing="0" height="30" style="font-weight: bold;font-size: 12px;width: 620px;background-color: #e5e5e5;overflow-x: hidden;font-family: Helvetica, sans-serif !important;border-spacing: 0 !important;border-collapse: collapse !important;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
</table>
</td>
</tr>
<tr>
<td width="900" align="center" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
<div data-type="slot" data-key="xhkwbds5tth" data-allowed-blocks="" data-max-blocks="" data-label="Drop blocks or content here"></div>
</td>
</tr>
<tr>
<td align="center" valign="top" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
<table align="center" class="full-width-spacer" border="0" cellpadding="0" cellspacing="0" height="30" style="font-weight: bold;font-size: 12px;width: 620px;background-color: #e5e5e5;overflow-x: hidden;font-family: Helvetica, sans-serif !important;border-spacing: 0 !important;border-collapse: collapse !important;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
</table>
</td>
</tr>
<tr>
<td class="body-table-spacing" align="center" valign="top" style="font-weight: bold;font-size: 16px;font-family: Helvetica, sans-serif !important;">
<table class="container-frame" border="0" cellpadding="0" cellspacing="0" align="center" style="font-weight: bold;font-size: 12px;width: 620px;background-color: #e5e5e5;overflow-x: hidden;font-family: Helvetica, sans-serif !important;border-spacing: 0 !important;border-collapse: collapse !important;mso-table-lspace: 0pt !important;mso-table-rspace: 0pt !important;">
<!--<![endif]-->
<!-- end of FULL WIDTH IMAGE-->
Best Answer
The best and simplest way I have found to handle this (outside code edits) is to force the actual image dimensions to be the maximum width you desire. E.g. only insert images that are actually 600px wide.
It will cause issues with the 125% DPI as that will increase the image size due to the increased DPI, but that is a whole other issue in itself.