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 属性，以及一些允许图像默认响应的内联样式（无需定位 w/ 类并更新通过媒体查询）。

这是我用于所有图像的代码。 width 属性涵盖了 Outlook（和其他一些客户端）的问题，并且内联样式适用于其他任何地方：

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

min-width 属性只是为了确保在较小的屏幕上查看时，图像不会变得太小。

希望这会有所帮助！