Динамическая высота и ширина изображения в HTML-письмах в Outlook - PullRequest
Новая
       21

Динамическая высота и ширина изображения в HTML-письмах в Outlook

0 голосов
/ 29 мая 2019

Я отправляю электронное письмо в формате HTML с содержимым, созданным React.js. В теле письма я должен поместить значок клиента в ячейку 40x40.

Иконки некоторых клиентов квадратные и выглядят нормально. Другие высокие или широкие, и Outlook искажает их, чтобы они поместились в ячейку 40х40, что не круто.

Вот несколько вещей, которые я пробовал, и как Outlook разрушает их:

  1. Показывает изображение в полном размере (max-height и max-width не работают): 
<table border="0" cellPadding="0" cellSpacing="0" width="40" height="40">
  <tbody>
    <tr>
      <td align="center">
        <img
          alt=""
          border="0"
          src={iconUrl}
          width="auto"
          height="auto"
          style={{ display: "block", maxHeight: "40px", maxWidth: "40px" }}
        />
      </td>
    </tr>
  </tbody>
</table>
  1. Искажает изображение, превращая его в квадрат 40х40: 
<table border="0" cellPadding="0" cellSpacing="0" width="40" height="40">
  <tbody>
    <tr>
      <td align="center">
        <img
          alt=""
          border="0"
          src={iconUrl}
          width="40"
          height="40"
          style={{ display: "block", width: "auto", height: "auto", maxHeight: "40px", maxWidth: "40px" }}
        />
      </td>
    </tr>
  </tbody>
</table>
  1. Показывает изображение в полном размере: 
<table border="0" cellPadding="0" cellSpacing="0" width="40" height="40">
  <tbody>
    <tr>
      <td align="center">
        <img
          alt=""
          border="0"
          src={iconUrl}
          style={{ display: "block", maxHeight: "40px", maxWidth: "40px" }}
        />
      </td>
    </tr>
  </tbody>
</table>
  1. Outlook не поддерживает свойства стиля background, поэтому ничего не отображается : 
<table border="0" cellPadding="0" cellSpacing="0" width="40" height="40">
  <tbody>
    <tr>
      <td align="center">
        <div
          style={{
            display: "block",
            height: "40px",
            width: "40px",
            backgroundImage: `url(${iconUrl})`,
            backgroundSize: "cover",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center center",
          }}
        />
      </td>
    </tr>
  </tbody>
</table>
  1. Показывает изображение в полном размере: 
<table border="0" cellPadding="0" cellSpacing="0" width="40" height="40">
  <tbody>
    <tr>
      <td align="center">
        <img
          alt=""
          border="0"
          src={iconUrl}
          style={{ display: "block", maxWidth: "40px", maxHeight: "40px", objectFit: "cover" }}
        />
      </td>
    </tr>
  </tbody>
</table>

Есть предложения? Спасибо.

Ответы [ 2 ]

0 голосов
/ 30 мая 2019

Ваша декларация высоты в 40 пикселей искажает логотипы.Кроме того, Outlook не распознает максимальную ширину / высоту, так что это избыточно.В идеале вы должны удалить высоту и позволить Outlook пропорционально масштабировать изображения.

НО Outlook также всегда отображает изображения с истинной шириной.Это особенно очевидно при кодировании писем с помощью изображений, оптимизированных для Retina.Скажем, у вас есть баннер шириной 600px / full, вы должны сохранить изображение в 1200px для Retina и объявить ширину 600px в своем коде.Хорошо Outlook покажет версию 1200px.Досадно!Один из способов - установить высоту уменьшенной версии.И это одна из тех проблем, которые вы решаете в данный момент, не пытаясь.

Лучше всего было бы:

  1. Снять декларацию высоты в целом.
  2. Измените размер изображения до 40px в ширину.Таким образом, соотношение WxH будет правильным.

Очевидно, что это идеальный мир, и я понимаю, что вы не можете быть в положении, это может быть много работы или у вас может быть много клиентов, приходящих вделает это утомительно.Так что просто рекомендация.

0 голосов
/ 29 мая 2019

Outlook будет игнорировать ширину изображения, установленную во встроенном стиле.Поскольку ваши значки должны быть размером 40px, объявите ширину как <img width="40" />

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="40">
  <tr>
    <td style="text-align: center">
      <img src="https://via.placeholder.com/40" width="40" height="40" alt="" border="0"  style="height: auto; max-width: 40px;">
    </td>
  </tr>
</table>

Кроме того, Outlook создает только фоновые изображения с использованием VML.

Наконец, Outlook и другие почтовые клиенты будутигнорируйте HTML и CSS, которые не отформатированы правильно.Я бы предложил освежить правильный путь для разделения значений CSS ;.Вы будете испытывать меньше головных болей.

Удачи.

...