我正在尝试将图像嵌入到电子邮件兼容的 HTML 文件中。
我没有添加可能造成安全威胁的图像 URL，而是将图像嵌入到 HTML 文件中使用的标记中。
<img alt="" border="0" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA............">
我嵌入的图像在电子邮件客户端中似乎缩小到原始大小的 80%。以下是该文件在浏览器中的显示方式的屏幕截图:
在浏览器中查看时的 HTML 文件
以下是该文件在电子邮件客户端 (Outlook for Office 365) 中的外观屏幕截图:
在电子邮件客户端中查看时的 HTML 文件
正如您所看到的，图像在电子邮件客户端中似乎缩小了。尺寸如下:
Original : 800px X 600px
Email client : 640px X 480px
Width = 800 x 0.8 = 640px
Height = 600 x 0.8 = 480px
有人可以建议如何将图像放入容器中吗？为什么 Outlook 中的图像会缩小？
您可以引用此 HTML 文件:
Google 云端硬盘:https://drive.google.com/open?id=1Me70-HIkLAB__BY_skOhyBXKDZj3lKVc
JSFiddle:http://jsfiddle.net/jv16m794
提前谢谢您!
最佳答案
我已在 Litmus 中对此进行了测试，但仅在 120dpi 屏幕缩放版本的 Outlook 中看到此问题。 这是一篇介绍 120dpi 屏幕设置及其如何影响电子邮件的文章 - https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013/
我测试了一些东西并找到了修复方法。 修改电子邮件的标题:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>关于html - Outlook 等电子邮件客户端中的嵌入式图像缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58073286/