是否有适合对象：包含电子邮件的替代方案？

Question

我正在编写一份电子邮件通讯，我想并排显示我们数据库中的 3 张产品图片。图像将被自动选择，它们都有不同的宽度/高度比。我需要它们适合某个空间，以便它们下面的链接都出现在一行上。在网络上我可以使用这样的东西：

<img src="{{ product.image }}" style="height: 150px; width: 100%; object-fit: contain">

但是，Outlook 显然不支持对象匹配。任何电子邮件友好的替代方案？

Answer 1

看来 Outlook 支持 background-image、background-size 等。

但是，对于“它是否支持背景大小：包含”这个问题，我找不到明确的答案

如果您有使用真实 Outlook 进行测试的方法，您或许可以尝试这种显示图像的方法。如果它不起作用，我会删除这个答案！

<table style="width: 100vw;">
  <tbody>
    <tr>
      <td style="background-image:url(https://picsum.photos/id/1015/200/300);background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; width: 30%; height: 150px"></td>
      <td style="background-image:url(https://picsum.photos/id/1015/300/300);background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; width: 30%; height: 150px"></td>
      <td style="background-image:url(https://picsum.photos/id/1015/300/200);background-size: contain; background-repeat: no-repeat no-repeat; background-position: center center; width: 30%; height: 150px"></td>
    </tr>
    <tr>
      <td style="text-align: center;">text here</td>
      <td style="text-align: center;">text here</td>
      <td style="text-align: center;">text here</td>
    </tr>
  </tbody>
</table>