如何通过CSS为Outlook客户端设置特定图片尺寸？

问题背景 #

构建HTML邮件模板时，需要为MS Outlook客户端单独设置图片尺寸（width="270"、height="190"），其他客户端保持图片宽度100%。原图片代码如下：

<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>

尝试通过<head>中的MSO条件CSS声明实现需求，但Litmus测试无效果：

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

使用条件注释重复图片代码的方式可生效，但不想重复粘贴图片URL，询问CSS方法失效的原因及替代方案。

失效原因 #

Outlook桌面版采用Word的渲染引擎，对CSS的支持存在核心限制：

• 内联HTML属性（如<img>的width）优先级远高于内部/外部CSS样式，即使添加!important也无法覆盖。
• Outlook不会用CSS样式覆盖图片的原生width/height属性，只会优先解析HTML标签上直接声明的属性值。

解决方案（无需重复图片代码） #

不需要重复整个图片标签，只需通过条件注释为不同客户端提供不同的内联属性值即可：

<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"
         <!--[if !mso]><!-->width="100%"<!--<![endif]-->
         <!--[if mso]>width="270" height="190"<![endif]-->
    >
  </a>
</td>

说明 #

• <!--[if !mso]><!-->width="100%"<!--<![endif]-->：非Outlook客户端会读取这段注释内的width="100%"
• <!--[if mso]>width="270" height="190"<![endif]-->：仅Outlook客户端会读取这段内的固定尺寸属性
• 整个图片标签只写一次，无需重复URL，同时满足不同客户端的渲染需求

内容的提问来源于stack exchange，提问作者Petrus Borel