为什么前景会拉长我的图像高度？答案

【问题标题】：Why is outlook stretching out my images height?为什么前景会拉长我的图像高度？
【发布时间】：2019-08-07 04:23:57
【问题描述】：

这周我被介绍到 html 电子邮件的奇迹。我有一封电子邮件需要并排显示图像和一些文本。我遇到的问题是图像被垂直拉伸，而不是由宽度自动设置高度。这个问题只发生在outlook中。

这是正在渲染的内容：

这是组成它的代码：

<table class="container" align="center" width="640" cellpadding="0" cellspacing="0">
  <tr>
    <td width="256" style="width:40%; float:left; text-align:right;">
      <img class="max-image" width="256" style="display:block;width:100%; height:auto;" src="https://cdn.pixabay.com/photo/2015/06/25/17/56/people-821624_1280.jpg" alt="coach picture"/>
    </td>
    <td width="384" style="width:60%; float:left; text-align:center;">
      <table width="100%">
        <tr>
          <td width="10"></td>
          <td>
            <div style="padding-left: 10px;text-align: center;">
              <p style="color:#6AA342;"><strong>Meet The Coach</strong></p>
              <p>{{ coach_first_name }}</p>
              <p>{{ bio }}</p>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

从到目前为止我在网上收集的信息来看，当您没有明确设置图像的高度属性时，Outlook 似乎并不喜欢，但我遇到的问题是该图像是动态设置的，它可能是从电子邮件到电子邮件的纵横比不同，所以我无法真正设置图像的高度。

【问题讨论】：

您好，我似乎无法在任何 Outlook 程序或基于 Web 的 Outlook 中复制该问题。这并不意味着您没有问题，但可能意味着您的代码存在更广泛的问题。你能发布你的整个代码吗？除此之外，您能否确认您在哪个 Outlook 客户端中看到此问题？

标签： html css email outlook html-email

【解决方案1】：

如果您看一下以下行：

<td width="256" style="width:40%; float:left; text-align:right;">

您可能会看到 Outlook 不支持的 float:left 属性。事实上，Outlook 使用 Word 来呈现 HTML 正文。

您可以在以下文章中找到支持和不支持的 HTML 元素、属性和级联样式表属性的完整列表：

【讨论】：

虽然这个答案很有帮助，但它并不能解决手头的问题，所以应该作为评论添加。
让我们等发帖者看看有没有帮助。
Outlook 不支持其他元素，因此最好先评估标记。