CODEWITHSUNDEEP
htmlcssimageoutlookhtml-email
Zakia Hossain
Zakia Hossain

Reputation: 1

Proportionate html images in Outlook

I have a number of different sized images which I am trying to resize and make proportionate with one another using css width and height attributes on <td> elements, and then making the width and height of the actual images 100% of this <td> element.

I am then trying to use this code in an e-mail campaign. The problem is this code works correctly, as expected, but outlook still seems to render the images with their original width and height values.

Does anybody know how I can prevent this from happening.
Note: I have removed the image src and links from my code.

<table width="100%"> <!-- a width 100% container -->
   <tr>
      <td></td> <!-- an empty cell, which will adapt its width -->
      <td width=250 height=300> <!-- it's like max-width:200px -->
       <a href="SOME LINK">
        <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" />
      </a>
      </td>
      <td></td> <!-- another empty cell, which will adapt its width -->
   </tr>
    <tr>
      <td></td> <!-- an empty cell, which will adapt its width -->
      <td width=250 height=300> <!-- it's like max-width:200px -->
   <a href="SOME LINK">
            <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" />
    </a>
      </td>
      <td></td> <!-- another empty cell, which will adapt its width -->
   </tr>
</table>

Upvotes: 0

Views: 1332

Answers (1)

Gortonington
Gortonington

Reputation: 3587

Outlook is wonky. It renders via WordHTML, which is silly.

The issue is that without a defined value in the HTML attribute, Outlook views 100% as the total width of the actual image (and sometimes even larger if the resolution of your desktop is different from the resolution of the image).

Your best bet is to either set media queries to change width/height to 100% once it reaches your desktop break point, or to do something even wonkier, like below:

<img width="640" height="240" src="SOME IMAGE LINK" style="width:100%; height:100%" />

You just replace the 640 and 240 properties with the height and width you want your image. The rational behind this is that the vast majority of email clients respect the proper waterfall and place CSS above HTML attributes, but Outlook, like the silly goose it is, will actual ignore the 100% CSS and work based off of the declared HTML attribute.

Now this is not a 100% foolproof message and should be tested extensively.

Your final solution, if nothing else works is to actually resize the original image to the maximum size you want it to display in Outlook.

Upvotes: 1

Related Questions