HTML邮件开发中object-fit: contain有没有适用的兼容替代方案

邮件客户端兼容性优先，优先使用原生table布局、内联样式，避免CSS3属性，以下为两种落地性强的替代方案，完全覆盖Outlook等主流客户端兼容需求：

方案1：嵌套表格+最大宽高限制（推荐，兼容性覆盖99%邮件客户端） #

实现原理：用固定尺寸的单元格作为容器，通过垂直/水平居中+最大宽高限制实现类似object-fit: contain的效果，图片保持原有比例缩放，不会拉伸。
完整代码示例（含三列并排布局+底部链接对齐逻辑）：

<!-- 外层三列布局表格，总宽度按邮件常用600px设置，可按需调整 -->
<table width="600" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <!-- 单个产品列，重复3次即可 -->
    <td width="190" valign="top">
      <!-- 图片容器：固定高度150px，水平垂直居中 -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
        <tr>
          <td height="150" align="center" valign="middle" style="background-color: #ffffff;">
            <img src="{{ product.image }}" alt="{{ product.name }}" style="max-width: 190px; max-height: 150px; border: 0; display: block;">
          </td>
        </tr>
        <!-- 下方链接区域，固定高度，保证所有列链接在同一行 -->
        <tr>
          <td height="40" align="center" valign="middle" style="font-family: Arial, sans-serif; font-size: 14px;">
            <a href="{{ product.url }}" style="color: #0066cc; text-decoration: none;">{{ product.linkText }}</a>
          </td>
        </tr>
      </table>
    </td>
    <!-- 列间隙 -->
    <td width="15"></td>
    <!-- 第二个产品列 -->
    <td width="190" valign="top">
      <!-- 同上重复结构 -->
    </td>
    <td width="15"></td>
    <!-- 第三个产品列 -->
    <td width="190" valign="top">
      <!-- 同上重复结构 -->
    </td>
  </tr>
</table>

该方案优势：

• 图片原生渲染，支持alt属性展示，图片加载失败时体验更好
• 所有属性均为Outlook、网易邮箱、QQ邮箱等主流客户端全支持的属性，兼容性极强
• 无需额外处理图片，直接调用数据库原始图即可

方案2：背景图方案（适合极端宽高比图片场景） #

实现原理：如果产品图存在特别长/特别扁的极端比例，用背景图定位+透明占位图的方式可以完全保证容器尺寸不会被撑开，效果和object-fit:contain完全一致。
图片部分代码示例：

<td height="150" width="190" align="center" valign="middle" style="background-image: url('{{ product.image }}'); background-position: center center; background-repeat: no-repeat; background-size: contain; background-color: #ffffff;">
  <!-- 透明1px占位图，撑满容器保证点击区域完整，base64内嵌无需额外引入资源 -->
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100%" height="100%" alt="{{ product.name }}" style="border: 0; display: block;">
</td>

注意事项：

• 背景图的background-size: contain在2013及以上版本的Outlook都支持，更低版本的Outlook会自动显示原图居中，不会出现拉伸问题
• 整体布局和底部链接逻辑和方案1保持一致即可

内容的提问来源于stack exchange，提问作者Richard Chachaľák