电子邮件客户端（如 Outlook）中的嵌入式图像缩小

Question

我正在尝试将图像嵌入电子邮件兼容的 HTML 文件中。

我没有添加可能构成安全威胁的图像 URL，而是将图像嵌入到 HTML 文件中使用的标记中。

<img alt="" border="0" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA............">

我嵌入的图像在电子邮件客户端中似乎缩小为原始大小的 80%。以下是该文件在浏览器中的外观截图：

HTML 文件在浏览器中查看

以下是文件在电子邮件客户端（Office 365 的 Outlook）中的外观截图：

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

提前致谢！

Answer 1

我已经在 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>

电子邮件客户端（如 Outlook）中的嵌入式图像缩小

Embedded image shrinking in email clients like Outlook

html

css

outlook

email-client

html-email