Outlook 中 html 电子邮件中的动态图像高度和宽度

Question

我正在发送一封 HTML 电子邮件，其中包含由 React.js 生成的内容。在电子邮件的正文中，我必须将客户的图标放在一个 40x40 的单元格中。

有些客户的图标是方形的，看起来不错。其他的或高或宽，Outlook 会扭曲它们以适应 40x40 单元格，这并不酷。

以下是我尝试过的一些方法，以及 Outlook 如何破坏它们：

1. 以完整尺寸显示图像（最大高度和最大宽度不起作用）：

<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. 扭曲图像使其成为 40x40 正方形：

<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>

4. 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>

5. 以全尺寸显示图像：

<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>

有什么建议吗？谢谢。

Answer 1

您的 40 像素高度声明会扭曲徽标。此外，Outlook 无法识别最大宽度/高度，因此这是多余的。 理想情况下，您将删除高度并允许 Outlook 按比例缩放图像。

但 Outlook 也将始终以其真实宽度显示图像。这在使用 Retina 优化图像编码电子邮件时尤其明显。
假设您有一个 600 像素/全宽的横幅，您会将图像保存为 1200 像素以供 Retina 使用，并在代码中将宽度声明为 600 像素。 那么 Outlook 将显示 1200px 版本。恼人的！
一种解决方法是设置缩放版本的高度。这就是你目前遇到的问题，没有尝试。

最好的办法是：

1. 完全删除高度声明。
2. 自行调整图像大小，最小为 40 像素宽。这样一来，WxH 比率是正确的。

显然，这是一个完美的世界，我知道您可能无法胜任，可能工作量很大，或者您可能有很多客户进来，这让这很乏味。 所以只是一个建议。

Answer 2

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 值; 的正确方法。您会减少头痛。

祝你好运。