html - 无论图像大小如何，如何使图像在 HTML 电子邮件中响应

Question

我正在创建一个电子邮件模板，其中我的容器的最大宽度为:600 像素。我希望能够上传超过 800 像素宽的图像，并缩小图像以保持其预期的纵横比。所以即使我上传了一张 800 像素宽的图片，它也会缩放到 600 像素。

在 Outlook 中，我认为它不支持图像的最大宽度，因此导致它被拉伸(stretch)。

有什么解决办法吗？

Answer 1

是也不是。无论您的 CSS 和 HTML 大小如何，Outlook 都倾向于将图像强制为其实际大小。因此，使用比您希望在桌面版本上显示的更大的图像可能会在 Outlook 上中断。

响应式图像的最佳选择是在设置了最大宽度的表格中将图像设置为 100% 宽度。然后围绕这个表，为 MSO 制作条件代码，其中包含一个设置宽度表的最大宽度大小。

示例如下:

<!--[if gte MSO 9]>
  <table width="640">
     <tr>
        <td>
<![endif]-->
  <table width="100%" style="max-width:640px;">
    <tr>
      <td>
        <img src="image.jpg" width="100%" />
      </td>
    </tr>
  </table>
<!--[if gte MSO 9]>
      </td>
    </tr>
  </table>
<![endif]-->

使用 max-width 仍然会有一些怪癖，因为并非所有客户端都支持它。我会查看 CSS compatability并根据需要在上述基础上进行一些小的调整以确保它适合。然后再测试再测试。