css max-widthプロパティとOutlook

Question

電子メールを送信してMicrosoft Outlookで開くとバグがあります。

Outlookはcss max-widthパラメータをサポートしておらず、イメージサイズを定義するために使用されています。

私は条件付きのレンダリングで何かを試してみてください。

<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> 

誰かが絵のために正しいサイズを設定するために私を助けることができますか？

Answer 1

Outlookがmax-widthをサポートしていないことは間違いありません。 HTMLメールの画像をコード化する最良の方法は、imgタグのwidth属性と、画像をデフォルトで応答できるいくつかのインラインスタイルを使用することです（クラスを指定してターゲティングしたり、メディアクエリ経由で更新する必要はありません）。

すべての画像に使用するコードは次のとおりです。 width属性は、Outlook（およびその他のいくつかのクライアント）/ wの問題をカバーし、インラインスタイルは、他のどこでも仕事：

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

min-widthプロパティは、ちょうど小さな画面で見たときに、画像がdoesnの、ことを確認しています小さ過ぎる。

うまくいけば、これが役に立ちます。