Windows 10 Mail and image sizes

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.

Solution

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%"/>