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

Question

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

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

这有什么解决方案吗？

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兼容性并根据需要进行一些调整,以确保它适合.然后测试测试并测试一些.

Answer 2

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

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

进而：

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

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