css max-width property and outlook

Question

I've got a bug when sending email and then opening them in microsoft outlook.

The bug is that Outlook doesn't support the css max-width parameters and which is used to define an image size.

I try something with conditional rendering :

<td class="mcnImageContent" valign="top" style="text-align: <%= @booking.trip.theme.email_client_logo_position || 'left' %>; padding-right: 9px;padding-left: 9px;padding-top: 0;padding-bottom: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
    <% if email_logo_url %>
    <!--[if mso]>
    <table>
        <tr>
            <td width="<%= @booking.present? ?
                (@booking.trip.theme.email_client_logo_zoom.to_f * 
                400.to_f).to_i.to_f : 
                ((@resource.client.try(:theme).try(:email_client_logo_zoom) || 
                1).to_f * 400.to_f).to_i.to_s %>">
                <![endif]-->
                <img alt="" src="<%= email_logo_url %>" style="max-width: <%= 
                    @booking.present? ? (@booking.trip.theme.email_client_logo_zoom.to_f 
                    * 400.to_f).to_i.to_f : 
                    ((@resource.client.try(:theme).try(:email_client_logo_zoom) || 
                    1).to_f * 400.to_f).to_i.to_s %>px;padding-bottom: 0;display: inline 
                    !important;vertical-align: bottom;border: 0;line-height: 
                    100%;outline: none;text-decoration: none;height: auto !important;" 
                    class="mcnImage">
                <!--[if mso]>
            </td>

Can someone help me to set the correct size for the picture?

Answer 1

You're absolutely right that Outlook doesn't support max-width. The best way to code images for HTML emails is to use the width attribute on the img tag, along with some inline styles that allow for images to be responsive by default (without you having to target w/ a class and update via a media query).

Here's the code I use for all images. The width attribute covers problems w/ Outlook (and a few other clients) and the inline styles work everywhere else:

<img alt="" src="http://placehold.it/1200x600" width="600" border="0" style="display: block; max-width: 100%; min-width: 100px; width: 100%;">

The min-width property is there just to make sure that, when viewed on smaller screens, the image doesn't get too small.

Hopefully this helps!