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 电子邮件编码图像的最佳方法是使用标签width上的属性img，以及一些允许图像默认响应的内联样式（您无需使用类进行定位并通过媒体查询进行更新）。

这是我用于所有图像的代码。该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属性只是为了确保在较小的屏幕上查看时，图像不会变得太小。

希望这会有所帮助！