无论图像大小如何，如何使 HTML 电子邮件中的图像响应 [英] How to make an image responsive in HTML email regardless of image size

问题描述

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

I am creating an email template where my container has a max-width: 600px. I want to be able to upload images that are in excess of 800px wide, and the images to scale down to maintain their intended aspect ratio. So even if I uploaded an 800px wide image, it would scale to 600px.

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

In Outlook, I don't think it supports max-width for images which therefore caused it to stretch.

有什么解决办法吗?

推荐答案

是和否.无论您的 CSS 和 HTML 大小如何，Outlook 都倾向于将图像强制为其实际大小.因此，使用比您希望在桌面版本上显示的图像大的图像可能会在 Outlook 上出现问题.

Yes and no. Outlook tends to force the image to its actual size, regardless of your CSS and HTML sizings. So using images that are bigger than what you want to be displayed on your desktop version is likely to break on Outlook.

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

Your best bet for responsive images would be to have the images as 100% width inside a table that has max-width set. Then around this table, make conditional code for MSO that contains a set width table at the max-width size.

示例如下:

<!--[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 兼容性 并根据需要在上述内容之上进行一些小调整以确保它适合.然后再测试和测试.

There will still be some quirks with using max-width as not all clients support it. I would view CSS compatability and make little tweaks as needed on top of the above to ensure it fits. Then test and test some more.

这篇关于无论图像大小如何，如何使 HTML 电子邮件中的图像响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！