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

Question

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

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

有什么解决办法吗？

Answer 1

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

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

示例如下：

<!--[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 并根据需要在上述基础上进行一些微调以确保它适合。然后再测试再测试。

Answer 2

一天以来，我一直在为电子邮件中的图像宽度而烦恼。终于让它以 "responsive" 的方式工作......有点。我发现，虽然一些电子邮件客户端会忽略 <img> 标签的 CSS（至少 width 和 max-width 的 CSS）并将图像设置为它的全宽，它们中的大多数实际上会尊重直接在 <img> 上设置的 width 属性。所以这就是我所做的：

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />

然后：

.logo {
    display: block;
    width: 310px !important;
    max-width: 100% !important;
}

遵守 CSS 的客户将使用 CSS 作为图片，而忽略它的客户只会将宽度设置为 250 像素，这样图片就不会破坏不同布局屏幕尺寸。

Answer 3

我为移动设备使用了一个条件，包括一个 div 标签并设置了背景图像 url，具有定义的高度和宽度百分比，并且 div 标签定义了边界。效果比 img 标签好得多。下面的条件处理在 Outlook 以外的电子邮件客户端（如移动浏览器、WebMail 等）中显示图像。也适用于图像数据。

Example:
   <!--[if !mso]> <!-->
    <div    
style="
    background-image:url(http://www.example.org/image.png); 
    background-repeat:no-repeat;
    background-size:100% 100%; 
    width:auto; height: 300px;
"> 
    </div>
   <!-<![endif]->

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

How to make an image responsive in HTML email regardless of image size

html

css

email

outlook