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

发布时间：2020-12-14 19:43:35 所属栏目：资源来源：网络整理

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

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

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

这有什么解决方案吗？

解决方法

是的,不是.无论您的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并根据需要进行一些小调整,以确保它适合.然后测试测试并测试一些.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!