通过 CSS 为 Outlook 客户端定义特定的图像大小

Question

我目前正在构建一个新的 HTML 模板。

在一个部分中，我想为 MS-Outlook 显示不同的图像大小，因为它的反应方式与其他客户端不同。

原版的：

<td align="left" class="column_one_half column_image" valign="top" width="100%">
<a href="#" target="_blank"><img alt="" class="mso-size" src="https://xxx" width="100%"></a>
</td>

我需要在 Outlook 中显示尺寸为 width="270";height="190" 的图像。我想在头部使用 CSS 声明。

我正在尝试下面的方法，但是它不起作用。 石蕊没有变化。 我究竟做错了什么？

谢谢，最好的，

---

这是我试过的：

以下结构运行良好，Litmus 显示了预期的结果：

<!--[if mso]>
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<a href="#" target="_blank"><img alt="" src="xxx" width="270" height="190"></a>
</td>
<div style="display:none">
<![endif]-->
                                                                        <td align="left" class="column_one_half column_image" valign="top" width="100%">
<a href="#" target="_blank"><img alt="" src="xxx" width="100%"></a>
</td>
                                                                        <!--[if mso]>
<div>
<![endif]-->

但是，我不希望每个人都被迫将图像 URL 粘贴两次。 我想改用头部的 CSS。

我尝试了以下声明（将其粘贴在第一部分下：

   <!--[if mso]>  
    <style>
    img.mso-size {
    width:270px!important;
    height:190px!important;
    }
  </style>
<![endif]-->  

Answer 1

不幸的是，Windows 上的 Outlook 使用 Word 作为渲染引擎。 虽然它们支持 CSS 中的width和height ，但它们不支持<img>元素。 调整图像大小的唯一方法是使用 HTML width属性或 VML，如您所示。

通常，我所做的是在 HTML 属性中的 Outlook 中声明我想要的宽度。 然后在同一图像的内联样式中，为其他客户应用我想要的 styles。 根据您的示例，这可能会给出：

<img alt="" src="https://example.com" width="270" style="width:100%; max-width:270px;" />

请注意， width属性中的百分比值在Windows 的Outlook 中也存在错误。（它们将基于物理文件大小，而不是您通常期望的父元素大小。）有关 CSS 支持的更多详细信息，请参阅email客户，可以参考Can I email 。