Question

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

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

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

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

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

使图像变形为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>

以完整尺寸显示图像：

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

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>

以完整尺寸显示图像：

<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

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

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

最好的办法是：

完全删除高度声明。
您可以自行调整图像大小，宽度不得超过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值;。您将减少头痛。

祝你好运。

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

2 个答案: