Defining specific image size for Outlook-clients through CSS

Question

I'm currently building a new HTML-template.

In one section I want to display a different image size for MS-Outlook, as it doesn't react in the same way as other clients.

Original:

<td align="left" class="column_one_half column_image" valign="top" width="100%">
<a href="#" target="_blank"><img alt="" class="mso-size" src="https://xxx" width="100%"></a>
</td>

I need to show the image with the size width="270";height="190" in Outlook. I would like to use a CSS-declaration in the head.

I was trying the approach below, however it doesn't work. Litmus is showing no change. What am I doing wrong?

Thanks and best,

---

This is what I tried:

The following structure works well, Litmus shows the expected result:

<!--[if mso]>
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<a href="#" target="_blank"><img alt="" src="xxx" width="270" height="190"></a>
</td>
<div style="display:none">
<![endif]-->
                                                                        <td align="left" class="column_one_half column_image" valign="top" width="100%">
<a href="#" target="_blank"><img alt="" src="xxx" width="100%"></a>
</td>
                                                                        <!--[if mso]>
<div>
<![endif]-->

But, I don't want everyone to be forced to paste in the image-URL twice. I would like to use the CSS in the head instead.

I tried the following declaration (pasted it under the first -section:

   <!--[if mso]>  
    <style>
    img.mso-size {
    width:270px!important;
    height:190px!important;
    }
  </style>
<![endif]-->  

Answer 1

Unfortunately, Outlook on Windows use Word as a rendering engine. While they do support width and height in CSS, they do not for <img> elements. The only way to size an image is to use the HTML width attribute or VML as you showed.

Usually, what I do is declare the width I want in Outlook in the HTML attribute. And then in an inline style on the same image, apply styles I want for other clients. Based on your example, that could give:

<img alt="" src="https://example.com" width="270" style="width:100%; max-width:270px;" />

Note that percentage values in the width attribute are also buggy in The Outlooks on Windows. (They’ll be based on the physical file size and not on the parent’s element size as you’d normally expect.) For more details on CSS support in email clients, you can refer to Can I email.