HTML邮件中的图片如何适配不同客户端？

一丁目

3814

发布于
2020-08-04 广东

更新于
2022-12-13

问题描述

现在的需求是使用HTML格式的邮件，然后HTML的内容只是展示一张图片。问题是这个HTML格式的邮件在不同的邮件客户端下展示的效果不一样，怎么样才能做到适配呢？

问题出现的环境背景及自己尝试过哪些方法

我试过在outlook2016、foxmail，展示都是没问题的，但是在ios自带的邮件、outlook2013，图片就会被压扁变形而不是按比例缩放。

我也试过网上找了一些邮件模板，但是在outlook2013和一些邮件的客户端上不奏效。

你期待的结果是什么？

我想达到的效果是在不同的邮件客户端下，html中放的图片可以按比例缩放，而不会变形，在移动端的邮件客户端下放大这张图片可以看清(原图足够清晰)。

html css 邮件处理 email 前端

阅读 4.5k

3 个回答

得票最新

一丁目

3814

发布于
2022-12-13 广东

更新于
2022-12-13

✓ 已被采纳

对于html邮件，foxmail对开发者更友好，方便发送和编辑html形式的邮件，所以我下载了foxmail客户端，并让outlook和foxmail 连接了同一个邮件服务器。

最终我的解决办法和思路是：

首先用 outlook 给自己发送一封只有一张图片的邮件 ( 新建邮件 -> 插入图片 -> 发送 )；
截图4.png

然后在 foxmail 的 已发送邮件 中找到刚刚那封邮件，
右键选择再次编辑，接着以 html 形式打开；
截图1.png
截图2.png

就能在邮件编辑框得到以下的代码；

<style class="fox_global_style">
    div.fox_html_content { line-height: 1.5;}
    /* 一些默认样式 */
    blockquote { margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.5em }
    ol, ul { margin-Top: 0px; margin-Bottom: 0px; list-style-position: inside; }
    p { margin-Top: 0px; margin-Bottom: 0px }
</style>

<div class="WordSection1" style="page: WordSection1;">
    <p class="MsoNormal" style="margin: 0cm; text-align: justify; font-size: 10.5pt; font-family: DengXian;">
        <span lang="EN-US">
            <img width="xxx" height="xxx" style="width:xxxin;height:xxxin" id="图片_x0020_2"
                src="C:\Users\xxx\AppData\Roaming\Foxmail7\Temp-1624-20221213112846\Attach/image001(xx-xx-xx-29-28).png"
                alt="背景图案描述已自动生成"></span><span lang="EN-US">
            <o:p></o:p>
        </span>
    </p>
</div>

我们给这部分代码加上html的头和body标签，再 调整宽高为100%，
就能得到一个发送图片的 html模板 了；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style class="fox_global_style">
        div.fox_html_content { line-height: 1.5;}
        /* 一些默认样式 */
        blockquote { margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.5em }
        ol, ul { margin-Top: 0px; margin-Bottom: 0px; list-style-position: inside; }
        p { margin-Top: 0px; margin-Bottom: 0px }
    </style>
</head>
<body>
    <div class="WordSection1" style="page: WordSection1;">
        <p class="MsoNormal" style="margin: 0cm; text-align: justify; font-size: 10.5pt; font-family: DengXian;">
            <span lang="EN-US">
                <img width="100%" height="100%" style="width:100%; height:100%" id="图片_x0020_2"
                    src="C:\Users\xxx\AppData\Roaming\Foxmail7\Temp-1624-20221213112846\Attach/image001(xx-xx-xx-29-28).png"
                    alt="背景图案描述已自动生成"></span><span lang="EN-US">
                <o:p></o:p>
            </span>
        </p>
    </div>
</body>
</html>

接着我们把模板内图片的地址，替换为自己的图片地址，就得到一封只有一张图片的html形式的邮件了；

最后在发送的时候，选择以 html邮件 的形式发送就行。
截图3.png