Email template banner image dimension - html

Question

I am email template designed which contains a Banner Image. Everything is aligned perfectly except the banner. Below is my code snippet and output what I am receiving.
<p><img src="medical.jpg" width="100%" height="144" /></p>
<p> </p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
</span>
</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by <strong>${u_project_manager}</strong>.</span></span>
</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
</td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
</td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span>
</td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
</p>
<p> </p>
Output:
In my Gmail it is working perfectly fine but when it comes to outlook it is not working fine
Output:
Gmail Output
Outlook Output
In the Outlook the complete page itself displays the banner but in gmail it looks Okay. Am I doing anything wrong?

Answer 1

Remove the height and change the width of 100% for the image to the width of your email.
Example:
<p><img src="medical.jpg" width="100%" height="144" /></p>
should be:
<p><img src="medical.jpg" width="600" /></p>
The width of 600 pixels will be the width of your email. Height attribute can be dropped because if you assign a width to an image, height is proportionate. Don't use width in style tag, Outlook ignores it.
Also by default if you are using retina images (or really big ones) Outlook will resize the image to its original dimensions if it does not find a width attribute.

Answer 2

Try using height property in percent, something like 35% or use 144px
<img src="medical.jpg" width="100%" height="144px" />
or
<img src="medical.jpg" width="100%" height="35%" />