如何将PNG图片嵌入邮件使其在任意设备填满整个邮件查看页面

适用Mailchimp的单图全屏邮件HTML代码 #

以下代码可直接复制到Mailchimp的HTML编辑器中使用，仅需替换你的PNG图片外链地址为你已上传的PNG图片的公开访问链接即可：

<!DOCTYPE html>
<html lang="zh-CN" style="margin:0;padding:0;width:100%;height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮件标题</title>
    <style type="text/css">
        /* 清除所有客户端默认边距 */
        body { margin:0 !important; padding:0 !important; width:100% !important; height:100% !important; -webkit-text-size-adjust:100%; }
        img { border:0; outline:none; text-decoration:none; display:block !important; }
        table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
    </style>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="margin:0;padding:0;width:100%;">
        <tr>
            <td align="center" valign="top" style="margin:0;padding:0;">
                <img src="你的PNG图片外链地址" width="100%" style="width:100%;height:auto;display:block;margin:0;padding:0;border:none;" alt="邮件内容">
            </td>
        </tr>
    </table>
</body>
</html>

操作注意事项

• 替换图片链接时，需确保图片是公开可访问的链接，不能使用本地文件路径
• 粘贴代码前请先清空Mailchimp编辑器内所有原有内容，避免默认模板的间距影响效果
• 完成后可通过Mailchimp的预览功能，分别在桌面端、移动端验证全屏效果

内容的提问来源于stack exchange，提问作者Keels