Поведение фонового изображения ячейки в Outlook

Question

У меня проблема с Outlook (сюрприз) и фоновое изображение в ячейке таблицы. Теперь проблема в том, что я могу заставить его работать в 99% версий Outlook, за исключением настольной версии 2016 года, работающей на Windows 10.

Вот код для блока:

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top; width: 640px;" width="640">
<tr>
    <td class="w-full" background="http://via.placeholder.com/640x320" bgcolor="#7bceeb" width="640" valign="top">
            <!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1280px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
            <div>
                <table align="" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top;" width="640">
                    <tr>
                        <td valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
                                <tr>
                                    <td height="35" style="text-align: center;"> </td>
                                </tr>
                                <tr>
                                    <td align="center" style="color:#FFFFFF; font-size:24px;">
                                        <div style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #ffffff; text-transform: uppercase;"> <font face="'Century Gothic', Helvetica, Arial, sans-serif"><span style="font-size:44px;">Lorem Ipsum</span><br>
                                      <br>
                                      <span style="font-size:24px;">SOME TEXT HERE<br>
                                      with a page break here</span></font>
                                            <br>
                                            <br> &nbsp;</div>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td align="center" style=" font-family:'Century Gothic', Helvetica, Arial, sans-serif; font-size:14px; color:#ffffff; text-transform: uppercase; font-weight: bold;"> <a href="#" style="color:#ffffff; text-decoration:none; padding:14px 30px; display:inline-block; border:solid 1px #ffffff;" target="_blank">CTA Text</a></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="35"> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
        </td>
</tr>
</table>

и это даст такой результат: 2016 Desktop

Тем не менее, он убивает другие версии: все другие версии

Если я уменьшу ширину VML с 1280 пикселей до того, что ДОЛЖНО быть (640 пикселей), он исправит все остальные версии, но только даст мне половину изображения в настольном клиенте (в основном полярную противоположность).

Теперь я понимаю, что этот настольный клиент, вероятно, выполняет рендеринг с более высоким разрешением / разрешением, поэтому удвоение ширины дает мне правильный результат, а фактическая ширина дает мне половину ячейки.

Мой вопрос заключается в том, есть ли обходной путь / хак, который позволит мне отображать с двойной шириной в этом клиенте, и другие будут игнорировать это правило?

Буду признателен за любую помощь, так как я не могу найти нигде информации, заранее спасибо.

Answer 1

После недели охоты я наткнулся на эту статью, в которой рассматривается проблема, с которой я столкнулся:

Решение проблем масштабирования DPI с помощью электронной почты в формате HTML в Outlook

Было очень ясно, почему это ломается и как противостоять этому, поэтому я очень рекомендую проверить это, чтобы полностью понять проблему.

---

Однако, если вы спешите и просто хотите быстро исправить код, вам нужно вставить следующий код в тег HTML вашего шаблона:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Это говорит Outlook, что ожидать. Затем вам нужно будет вставить этот код в раздел HEAD вашего шаблона непосредственно перед закрытием:

<Head>
<!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
<![endif]-->
</Head>

и, наконец, как и раньше (см. оригинальный вопрос), вам нужно точно указать ячейке, что ей нужно делать с чем-то похожим на:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

Очевидно, что нужно настроить свои собственные электронные письма, но это сработало для меня. Я надеюсь, что этот ответ поможет другим, так же как и мне, когда он сводится к масштабированию DPI на новых машинах с мониторами с более высоким разрешением!

Полный кредит "Джеймсу" за это решение.