Изображения электронной почты Outlook сворачиваются до 1px - PullRequest
Новая
       4

Изображения электронной почты Outlook сворачиваются до 1px

0 голосов
/ 31 октября 2018

Я создал HTML-шаблон, который работает почти идеально, за исключением того, что изображения внезапно не отображаются в Outlook в Интернете.

Видимость будет уменьшена до ширины и высоты в 1 пиксель.

Я установил ширину во встроенных стилях, но не высоту, так как я хотел бы, чтобы клиент имел гибкость автоматической высоты. Проблема также возникает, даже если я установил ширину и высоту.

Это прекрасно работает, за исключением внешнего вида, и я не могу понять, почему.

вот код из одного из разделов, хотя это происходит с каждым изображением в шаблоне.

Я проверил, что изображения не отключены в моих настройках электронной почты 

  <table width="650" style="table-layout:fixed;margin-left:auto;margin-right:auto;" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper" mc:repeatable mc:variant="half and half white">
          <tr>
            <td align="left">
              <table width="650" class="wrapper" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
                <tr>
                  <td align="left">
                    <table width="324" border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
                      <tr>
                        <td class="pad_top_split" width="324" align="center" valign="top">
                          <a href="#" target="_blank"><img src="https://gallery.mailchimp.com/85d3e81373f3d7582fcc72bdb/images/ec03eb0f-61aa-4c51-8efd-621054f0652c.jpg" width="324" class="full_img" alt="Flush image 2" style="display:block; max-width:324px;" border="0" mc:edit="324_images2"></a>
                        </td>
                      </tr>
                    </table>
                    <!--[if gte mso 9]>
                  </td>
                  <td valign="top">
                    <![endif]-->
                    <table width="286" border="0" align="right" cellpadding="0" cellspacing="0" class="wrapper" bgcolor="#ffffff">
                      <tr>
                        <td valign="top">
                          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                              <td class="pad_side">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td height="32" class="fix_height"> </td>
                                  </tr>
                                  <tr>
                                    <td class="white" style="font-family:Arial, sans-serif;font-size:14px;letter-spacing:4px;line-height:34px;color:#000000;" mc:edit="text_2">Lorem ipsum text</td>
                                  </tr>
                                  <tr>
                                    <td height="7" style="line-height:0px;font-size:0px;"> </td>
                                  </tr>
                                  <tr>
                                    <td class="white" style="font-family:Arial, sans-serif;font-size:15px;background-color:#ffffff;line-height:25px;color:#000000;" mc:edit="para_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et. </td>
                                  </tr>
                                  <tr>
                                    <td height="32" class="fix_height"> </td>
                                  </tr>
                                </table>
                              </td>
                              <td width="30" class="hide"> 
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
...