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 compatability并根据需要进行一些调整，以确保它适合。然后测试测试并测试一些。

Answer 2

现在已经在电子邮件中突破了图像宽度了一天。终于让它以“响应”的方式工作......有点。我发现，虽然有些电子邮件客户端会忽略<img>标记的CSS（至少是width和max-width的CSS）并将图像设置为全宽，但大多数都会实际上尊重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，因此该图像不会破坏不同屏幕尺寸的布局。

Answer 3

我使用了带条件的移动设备，包括一个div标签，并设置了背景图片网址，并定义了高度和宽度百分比，并且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电子邮件中的图像响应

3 个答案: