css max-width屬性和外觀

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屬性覆蓋問題瓦特/展望（和其他幾個客戶端）和內聯樣式工作在其他地方：

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

的min-width屬性那裏只是爲了確保，在小屏幕上觀看時，圖像沒有按不要太小。

希望這有助於！