Windows 10 Mail and image sizes

user_14857732 0
Viewed 471

My html email template works well with gmail except windows 10 mail. Some images look giant on my windows 10 mail but normal size on my gmail. I have check out this post and its solution, but it is not working. Below is my whole html code

<!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>

This template works well in gamil, everything down to the size and align of the images are correct, it is just not working in windows 10 mail.

What I have tried:

changed 100% -> 100px changed 100% -> 100

Actual result: nothing changes

Expected result: images and align to be working in windows 10 mail.

html-email css html
1 Answers

Windows 10 Mail uses Word's rendering engine, just like the Outlooks on Windows. Word's rendering engine doesn’t understand the style attribute on <img> elements. So what you need to do is define a width attribute with the expected value for Outlook, and have a more flexible width in an inline style for other email clients.

Also please note that the Outlooks (and Windows 10 Mail) don’t react properly to percentage widths. Setting a width="100%" would make the image "100% the width of the file physical width", and not "100% of its parent element" as you'd expect in CSS. So don't use percentages for the width attribute.

In your case, it would end up looking something like the following:

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