Question

我有许多不同大小的图像，我试图调整大小并使用<td>元素上的css宽度和高度属性相互比例，然后使实际图像的宽度和高度100％这个<td>元素。

然后我尝试在电子邮件广告系列中使用此代码。问题是这个代码正常工作，正如预期的那样，但outlook似乎仍然使用原始的宽度和高度值渲染图像。

有谁知道如何防止这种情况发生 注意：我已从代码中删除了图片src和链接。

<table width="100%"> <!-- a width 100% container -->
   <tr>
      <td></td> <!-- an empty cell, which will adapt its width -->
      <td width=250 height=300> <!-- it's like max-width:200px -->
       <a href="SOME LINK">
        <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" />
      </a>
      </td>
      <td></td> <!-- another empty cell, which will adapt its width -->
   </tr>
    <tr>
      <td></td> <!-- an empty cell, which will adapt its width -->
      <td width=250 height=300> <!-- it's like max-width:200px -->
   <a href="SOME LINK">
            <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" />
    </a>
      </td>
      <td></td> <!-- another empty cell, which will adapt its width -->
   </tr>
</table>

Answer 1

Outlook很不稳定。它通过WordHTML渲染，这很愚蠢。

问题是，如果HTML属性中没有定义的值，Outlook会将100％视为实际图像的总宽度（如果桌面的分辨率与图像的分辨率不同，有时甚至会更大）。 / p>

您最好的选择是设置媒体查询，一旦达到桌面断点，将宽度/高度更改为100％，或者做一些甚至更糟糕的事情，如下所示：

<img width="640" height="240" src="SOME IMAGE LINK" style="width:100%; height:100%" />

您只需将640和240属性替换为您想要图像的高度和宽度。这背后的理性是，绝大多数电子邮件客户端都尊重适当的瀑布并将CSS置于HTML属性之上，但Outlook，就像愚蠢的鹅一样，实际上会忽略100％的CSS，并根据声明的HTML属性进行工作。

现在这不是一个100％万无一失的消息，应该进行广泛的测试。

您的最终解决方案，如果没有其他方法可行，则实际上将原始图像的大小调整为您希望它在Outlook中显示的最大大小。

Outlook中的比例html图像

1 个答案: