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

前端之家收集整理的这篇文章主要介绍了无论图像大小如何,如何使HTML电子邮件中的图像响应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建一个电子邮件模板,其中我的容器的最大宽度为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并根据需要进行一些小调整,以确保它适合.然后测试测试并测试一些.

原文链接:/html/223789.html

猜你在找的HTML相关文章