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

问题描述

我正在创建一个电子邮件模板，其中我的容器的最大宽度为600px.我希望能够上传宽度超过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.

您最好的响应式图像选择是将图像设置为设置了最大宽度的表格内的宽度为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屋！