17

I am creating an email template where my container has a max-width: 600px. I want to be able to upload images that are in excess of 800px wide, and the images to scale down to maintain their intended aspect ratio. So even if I uploaded an 800px wide image, it would scale to 600px.

In Outlook, I don't think it supports max-width for images which therefore caused it to stretch.

Are there any solutions for this?

Aaron Critchley
  • 2,335
  • 2
  • 19
  • 32
Raj Chudasama
  • 187
  • 1
  • 2
  • 7
  • When I add a image that is 540px, then it will be responsive but if I upload another image say which is 1000px wide than on mailchimp it looks okay, but when I sent a test emailt o my outlook 2010, the image stretches to its original size which causes the the email to stretch with it. – Raj Chudasama Apr 01 '15 at 13:52
  • Try to look at this [gist](https://gist.github.com/elidickinson/5525752) – Tien Nguyen Apr 01 '15 at 14:11
  • And probably this [link](http://stackoverflow.com/questions/2426072/is-there-an-equivalent-of-css-max-width-that-works-in-html-emails) may be helpful for you too – Tien Nguyen Apr 01 '15 at 14:14

3 Answers3

28

Yes and no. Outlook tends to force the image to its actual size, regardless of your CSS and HTML sizings. So using images that are bigger than what you want to be displayed on your desktop version is likely to break on Outlook.

Your best bet for responsive images would be to have the images as 100% width inside a table that has max-width set. Then around this table, make conditional code for MSO that contains a set width table at the max-width size.

Example below:

<!--[if gte MSO 9]>
  <table width="640">
     <tr>
        <td>
<![endif]-->
  <table width="100%" style="max-width:640px;">
    <tr>
      <td>
        <img src="image.jpg" width="100%" />
      </td>
    </tr>
  </table>
<!--[if gte MSO 9]>
      </td>
    </tr>
  </table>
<![endif]-->

There will still be some quirks with using max-width as not all clients support it. I would view CSS compatability and make little tweaks as needed on top of the above to ensure it fits. Then test and test some more.

svelandiag
  • 4,231
  • 1
  • 36
  • 72
Gortonington
  • 3,557
  • 2
  • 18
  • 30
  • 1
    Of course this won't work on many platform such as Outlook that does not recognize the max-width property, so I don't realy why this is an accepted answer, he talked about Outlook & the answer does not give a solution to Outlook – TaouBen Feb 13 '21 at 12:51
  • @TaouBen - The table with the set width in the if MSO tag will control it in outlook. Those conditionals are for placing content that will only display in Outlook. Plus the answer is like 5 years old at this point – Gortonington Feb 13 '21 at 15:21
  • As I said @TaouBen, it has been over 5 years since this was written - which in Email Development is like 20 years in most other places. So in likelihood, some aspect has changed. If you happen to find a more up to date solution, by all means please post it. Leaving negative comments on a super old post is not very helpful to anyone. – Gortonington Feb 13 '21 at 19:55
  • Judging from this article (https://chuk.medium.com/how-to-code-outlook-proof-emails-254255cdbcdc) this is still a viable solution. Have you verified there is not syntax errors elsewhere or something else that is potentially affecting this code? – Gortonington Feb 13 '21 at 20:09
  • Downvote reason: Doesn't work in Outlook – NickG Dec 23 '21 at 11:14
  • The outer table looks right, but the image width attribute, if the image is 800px wide, will show as 800px. Outlook interprets width="100%" as 100% of the image - not the container! So you need ``. The max-width will take care of mobile responsiveness. – Nathan Dec 30 '21 at 04:23
  • Hot damn! It works... Kinda looked everywhere! It works on Outlook (latest version 16.64 (22081401)). Thank you, dear human (I assume). – Lorgen GR Magpantay Aug 28 '22 at 09:15
12

Been breaking my head over image width in emails for a day now. Finally got it to work in a "responsive" manner...somewhat. What I found is that, while some email clients will ignore CSS for <img> tags (at least CSS for width and max-width) and set the image to its full width, most of them will actually respect the width attribute set directly on the <img>. So this is what I did:

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />

And then:

.logo {
    display: block;
    width: 310px !important;
    max-width: 100% !important;
}

Clients that respect the CSS, will use CSS for the image, while clients that ignore it will just have width set to 250px, so that image doesn't break the layout for different screensizes.

GTCrais
  • 2,039
  • 2
  • 26
  • 32
1

I used a conditional for mobile, included a div tag and had set the background image url, with defined height and width percentages and the div tag has defined boundaries. Works so much better than img tag. The condition below handles displaying images in email client other than Outlook such as Mobile Browsers, WebMail, etc. Works for image data too. 

Example:
   <!--[if !mso]> <!-->
    <div    
style="
    background-image:url(http://www.example.org/image.png); 
    background-repeat:no-repeat;
    background-size:100% 100%; 
    width:auto; height: 300px;
"> 
    </div>
   <!-<![endif]->
Demetre Phipps
  • 107
  • 1
  • 3