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

Posted 2023-03-15

【中文标题】无论图像大小如何，如何在 HTML 电子邮件中使图像响应

【英文标题】：How to make an image responsive in HTML email regardless of image size

【发布时间】：2015-06-06 03:54:28

【问题描述】：

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

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

有解决办法吗？

【问题讨论】：

当我添加一个 540 像素的图像时，它会响应，但是如果我上传另一个图像，说它比 mailchimp 宽 1000 像素，它看起来还可以，但是当我向我的 Outlook 发送测试电子邮件时2010 年，图像拉伸到其原始大小，导致电子邮件随之拉伸。

试试看这个gist

这个link 可能对你也有帮助

【参考方案1】：

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

对于响应式图像，最好的办法是在设置了最大宽度的表格中将图像设置为 100% 宽度。然后围绕此表，为 MSO 制作条件代码，其中包含最大宽度大小的设置宽度表。

下面的例子：

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

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

【讨论】：

当然这在很多平台上都行不通，比如 Outlook 不能识别 max-width 属性，所以我不明白为什么这是一个公认的答案，他谈到了 Outlook 和答案没有给出 Outlook 的解决方案

@TaouBen - if MSO 标签中设置宽度的表格将在 Outlook 中控制它。这些条件用于放置仅在 Outlook 中显示的内容。加上此时的答案就像 5 岁

正如我所说的@TaouBen，写这篇文章已经有5年多了——在电子邮件开发中，在大多数其他地方就像20年一样。所以很可能，某些方面发生了变化。如果您碰巧找到更新的解决方案，请务必发布。在超级旧的帖子上留下负面的 cmets 对任何人都没有多大帮助。

从这篇文章 (chuk.medium.com/how-to-code-outlook-proof-emails-254255cdbcdc) 来看，这仍然是一个可行的解决方案。您是否确认其他地方没有语法错误或其他可能影响此代码的东西？

投反对票原因：在 Outlook 中不起作用

【参考方案2】：

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

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

然后：

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

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

【讨论】：

我认为这是一种更好且侵入性更小的方法。

对我来说很棒！在 Litmus 上进行了测试。

【参考方案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]->