Windows 10 邮件和图像大小

Question

我的 html 电子邮件模板适用于 gmail，但 windows 10 封邮件除外。有些图片在我的 windows 10 邮件上看起来很大，但在我的 gmail 上看起来正常。我已经检查了这个及其解决方案，但它不起作用。下面是我的全部 html 代码

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <title th:remove="all"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
    <style>

     #container {
        text-align: center;
        max-width: 900px;
        width:80%;
        margin-left:10%;
        margin-right:10%;
    }
    
    #salutation {
        color: #e45042;
        font-style: bold;
        font-size:14px;
        margin-top:5%;
    }
    
    #title {
        font-style: bold;
        font-size:17px;
        color: #2869af;
        
    }
    
    #qrText {
        margin-top:5%;
        font-size: 11px;
        font-style:italic;
    }
    
    #bodytext {
        font-size:14px;
    }
    
    #footer {
        text-align: center;
        font-size: 11px;
        width:70%;
        margin-left:15%;
        margin-top:5%;
    }
    </style>
</head>
<body>
    <div id="container">
        <div>
            <img th:src="@{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%;"/>
        </div>
        
        <div id="salutation">
            <p>Hi <span th:text="${name}"></span>,</p>
        </div>
        
        <div id="bodytext">         
            <p>
                <b>SOME TEXT</b>
            </p>
        </div>
        <div>
            <table style="width:100%;">
                <tr>    
                    
                    <td style="width:23%"><img th:src="@{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
                    <td style="vertical-align:bottom;width:31%"><img th:src="@{${environmentUrl+'/dist/img/email/some_img.png'}}" width="100%"/></td>
                    <td style="width:23%"><img th:src="@{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
                    <td style="width:23%"><img th:src="@{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
                </tr>
            
                <tr>
                    <td><b>SOME TEXT</b></td>
                    <td><b>SOME TEXT</b></td>
                    <td><b>SOME TEXT</b></td>
                    <td><b>SOME TEXT</b></td>
                </tr>
            </table>
        </div>  
    </div>
</body>
</html>

此模板在 gamil 中运行良好，图片的大小和对齐方式都正确，只是在 windows 10 封邮件中不起作用。

我尝试过的：

更改为 100% -> 100px 改变了 100% -> 100

实际结果：没有变化

预期结果：图像和对齐可以在 windows 10 封邮件中使用。

Answer 1

Windows 10 Mail 使用 Word 的渲染引擎，就像 Outlooks 在 Windows 上一样。 Word 的呈现引擎不理解 <img> 元素上的 style 属性。因此，您需要做的是为 Outlook 定义一个具有预期值的 width 属性，并为其他电子邮件客户端提供更灵活的 width 内联样式。

另请注意，Outlook（和 Windows10 Mail）对百分比宽度没有正确反应。设置 width="100%" 将使图像成为“文件物理宽度的 100%”，而不是如您在 CSS 中所期望的那样“其父元素的 100%”。所以不要对 width 属性使用百分比。

在你的例子中，它最终看起来像下面这样：

<img th:src="@{${environmentUrl+'/dist/img/email/some_img.png'}}" width="600" style="width:100%"/>

Windows 10 邮件和图像大小

Windows 10 Mail and image sizes

html

css

html-email