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属性，以及一些允许图像默认响应的内联样式（无需使用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属性只是为了确保在较小的屏幕上查看图像时不会太小。

希望这有帮助！

css max-width属性和outlook

1 个答案: