Banner image is not rendering properly in the Outlook notification - html

Question

I have a banner image added to the notification and dimension i set and Width: 100% & height: auto which is working fine in Mobile, Gmail but not working properly in Outlook.
My sample code:
<p> </p>
<p><img style="align: baseline;" title="" src="sampleimage.jpgx" alt="" width="100%" height="auto" align="baseline" border="" hspace="" vspace="" /></p>
<p> </p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p> </p>
<p>Your request is submitted (${number}).</p>
<p> </p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><strong>Title</strong></td>
</tr>
<tr>
<td style="color: black;" colspan="5">${short_description}</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><strong>Submitted by</strong></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><strong>Approver</strong></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><strong>Department</strong></td>
</tr>
<tr>
<td style="color: black;" colspan="3">${submitter}</td>
<td style="color: black;" colspan="1">${u_project_manager}</td>
<td style="color: black;" colspan="1"><span style="font-family: museo-sans, sans-serif;">${department}</span> </td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><strong>Business case </strong></td>
</tr>
<tr>
<td style="color: black;" colspan="5">
<p>${business_case}</p>
<p> </p>
</td>
</tr>
</tbody>
</table>
<hr />
<p><span style="font-size: 10pt;"><span style="font-family: 'Montserrat', sans-serif;">Thank you,</span><br /></span></p>
<p> Service Desk</p>
<p> </p>
I want to resize the banner image size, if i set the width & height with some values the image quality is getting disturbed and getting different outputs in different systems majorly on IOS & Outlook