在 Outlook 中缩放视网膜图像（不使用 img 属性）

【问题标题】：Scaling retina images in outlook (without using img attributes)在 Outlook 中缩放视网膜图像（不使用 img 属性）
【发布时间】：2017-08-30 13:57:50
【问题描述】：

我正在为自动化工具开发模板，但在 Outlook 中缩放视网膜图像时遇到问题。
我了解通常您必须使用图像属性，例如： style="max-width: 100px; width: 100%;"

问题是，如果要在模板模式下工作的用户替换图像，该工具会替换整个图像标签（因此我的内联 css）。

我想知道是否有人知道 Outlook 中缩放问题的另一种解决方案？不幸的是，将这些样式放在周围的 div、表格或 td 上不起作用。

提前致谢！

【问题讨论】：

标签： html css email outlook scaling

【解决方案1】：

你可以试试这个：

<!doctype html>
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style type="text/css">
        @media only screen and (max-width: 479px) {
        .deviceWidth {
           width:300px !important;
           height:auto;
          }
        }
     </style>
  </head>
<body>
    <table width="600" class="deviceWidth">
        <tr>
            <td>
                Retina Image (600) using media queries.
                <img class="deviceWidth" src="http://www.emailonacid.com/images/blog_images/Emailology/2015/Flower_600.jpg" width="600" ><br/>       
            </td>
        </tr>
    </table>

根据this的文章，应该是一个有效的替代方案。

希望这能有所帮助，

【讨论】：

感谢您的回复。恐怕这只会在屏幕
没错，示例中的媒体查询仅适用于
有道理！我会继续测试这个。谢谢！