Как избежать искажения изображений в HTML электронной почте в outlook

---

Я использовал бесплатный генератор html. Предварительный просмотр идеален. Когда я вставляю его в электронную почту, фотографии искажаются.

Это мой код.:

<title>


		body {
			margin: 0;
			padding: 0;
		}

		table,
		td,
		tr {
			vertical-align: top;
			border-collapse: collapse;
		}

		* {
			line-height: inherit;
		}

		a[x-apple-data-detectors=true] {
			color: inherit !important;
			text-decoration: none !important;
		}
	

		@media (max-width: 920px) {

			.block-grid,
			.col {
				min-width: 320px !important;
				max-width: 100% !important;
				display: block !important;
			}

			.block-grid {
				width: 100% !important;
			}

			.col {
				width: 100% !important;
			}

			.col>div {
				margin: 0 auto;
			}

			img.fullwidth,
			img.fullwidthOnMobile {
				max-width: 100% !important;
			}

			.no-stack .col {
				min-width: 0 !important;
				display: table-cell !important;
			}

			.no-stack.two-up .col {
				width: 50% !important;
			}

			.no-stack .col.num4 {
				width: 33% !important;
			}

			.no-stack .col.num8 {
				width: 66% !important;
			}

			.no-stack .col.num4 {
				width: 33% !important;
			}

			.no-stack .col.num3 {
				width: 25% !important;
			}

			.no-stack .col.num6 {
				width: 50% !important;
			}

			.no-stack .col.num9 {
				width: 75% !important;
			}

			.video-block {
				max-width: none !important;
			}

			.mobile_hide {
				min-height: 0px;
				max-height: 0px;
				max-width: 0px;
				display: none;
				overflow: hidden;
				font-size: 0px;
			}

			.desktop_hide {
				display: block !important;
				max-height: none !important;
			}
		}
	




<table cellpadding="0" cellspacing="0" class="nl-container" style="table-layout: fixed; vertical-align: top; min-width: 320px; margin: 0 auto; background-color: rgba(245, 245, 245, 1); width: 100%" valign="top" width="100%"><tbody><tr style="vertical-align: top" valign="top"><td style="vertical-align: top" valign="top"><div style="background-color: rgba(0, 0, 0, 0)">
<div class="block-grid" style="margin: 0 auto; min-width: 320px; max-width: 900px; background-color: rgba(0, 0, 0, 0)">
<div style="width: 100%; background-color: rgba(0, 0, 0, 0)">


<div class="col num12" style="min-width: 320px; max-width: 900px; vertical-align: top; width: 900px">
<div style="width: 100% !important">

<div style="padding: 5px 0">


<table border="0" cellpadding="0" cellspacing="0" class="divider" style="table-layout: fixed; vertical-align: top; min-width: 100%" valign="top" width="100%"><tbody><tr style="vertical-align: top" valign="top"><td class="divider_inner" style="vertical-align: top; min-width: 100%; padding: 10px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content" height="10" style="table-layout: fixed; vertical-align: top; height: 10px; width: 100%" valign="top" width="100%"><tbody><tr style="vertical-align: top" valign="top"><td height="10" style="vertical-align: top" valign="top"><span></span></td></tr></tbody></table>
</td></tr></tbody></table>

</div>

</div>
</div>


</div>
</div>
</div>
<div style="background-color: rgba(0, 0, 0, 0)">
<div class="block-grid two-up no-stack" style="margin: 0 auto; min-width: 320px; max-width: 900px; background-color: rgba(255, 255, 255, 1)">
<div style="width: 100%; background-color: rgba(255, 255, 255, 1)">


<div class="col num6" style="min-width: 320px; max-width: 450px; vertical-align: top; width: 450px">
<div style="width: 100% !important">

<div style="padding: 25px 0 25px 25px">

<div align="left" class="img-container left fullwidthOnMobile autowidth" style="padding-right: 0; padding-left: 0">


</div>

</div>

</div>
</div>


<div class="col num6" style="min-width: 320px; max-width: 450px; vertical-align: top; width: 450px">
<div style="width: 100% !important">

<div style="padding: 25px 25px 25px 0">

<div align="right" class="img-container right autowidth" style="padding-right: 0; padding-left: 0">


</div>
<div></div>

</div>

</div>
</div>


</div>
</div>
</div>
<div style="background-color: rgba(0, 0, 0, 0)">
<div class="block-grid" style="margin: 0 auto; min-width: 320px; max-width: 900px; background-color: rgba(214, 231, 240, 1)">
<div style="width: 100%; background-color: rgba(214, 231, 240, 1)">


<div class="col num12" style="min-width: 320px; max-width: 900px; vertical-align: top; width: 900px">
<div style="width: 100% !important">

<div style="padding: 5px">

<div align="center" class="img-container center fixedwidth" style="padding-right: 0; padding-left: 0">

<div style="font-size: 1px; line-height: 45px">Â&nbsp;</div>

</div>

<div style="color: rgba(5, 45, 61, 1); font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; line-height: 1.5; padding: 20px 10px 0 15px">
<div style="font-size: 12px; line-height: 1.5; font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; color: rgba(5, 45, 61, 1)">
<p style="font-size: 50px; line-height: 1.5; text-align: center; font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; margin: 0"><span style="font-size: 50px"><strong><span style="font-size: 50px"><span style="font-size: 38px">Herzlich willkommen bei uns!</span></span></strong></span></p>
<p style="font-size: 34px; line-height: 1.5; text-align: center; font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; margin: 0"><span style="font-size: 34px"><strong><span style="font-size: 34px"><span style="color: rgba(33, 144, 227, 1); font-size: 34px">*Vorname Name*</span></span></strong></span></p>
</div>
</div>

Что я уже пробовал:

ничего, не эксперт. Кто-нибудь может мне помочь? Спасибо

---