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属性那里只是为了确保，在小屏幕上观看时，图像没有按不要太小。

希望这有助于！