HTML 电子邮件 - 使图像适合表格单元格答案

【问题标题】：HTML emails - Fit an image in a table cellHTML 电子邮件 - 使图像适合表格单元格
【发布时间】：2017-10-12 15:11:25
【问题描述】：

我有一张桌子，里面有三个td，每个人都需要有图片。 td 的宽度和高度是固定的，但图像大小可能会有所不同。目标是在不扭曲单元格或图像本身的情况下拟合图像。不能使用background-image 属性（我知道很糟糕！）。代码如下：

<table cellpadding="2" cellspacing="2" width="600">
    <tr>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" style="display: block; width: 100%; height:auto;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; width: 100%; height:auto;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; width: 100%; height:100%;" />
        </td>
    </tr>
</table>

我在三个单元格中尝试了三种不同的样式 - 没有一个可以让我得到调整图像大小的结果。任何帮助表示赞赏。谢谢。

【问题讨论】：

您为 td 和图像提供不同的尺寸。给图像大小等于 td。 style="显示：块；宽度：190px；高度：190px；"
达不到目的 - 试图实现不同大小的图像以适应固定大小的表格单元格而不失真。

标签： html css html-table html-email

【解决方案1】：

尝试使用 - max-width: 100% 和 max-height:100% 作为图像样式。这会将较大的值（高度或宽度）最大化到单元格的宽度（或高度），而不会拉伸图像。

编辑：新的...添加代码 sn-p。由于您的样式是内联的，所以我就这样离开了。

<table cellpadding="2" cellspacing="2" width="600">
    <tr>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" style="display: block; max-width: 100%; max-height:100%;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; max-width: 100%; max-height:100%;" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" style="display: block; max-width: 100%; max-height:100%%;" />
        </td>
    </tr>
</table>

【讨论】：

好东西 - 这就是我所缺少的。实现起来非常简单，但必须使用原始 HTML 和电子邮件模板的最低 CSS 来实现，这很困难。
很高兴我能帮上忙。 :)
max-width:100% 的问题是一些电子邮件客户端会填满图像的整个宽度，即使它超过了表格单元格大小。我会尝试 max-width:190px 并将 width="190" 添加到图像中，因为 Outlook 根本不使用 max-width。
是的，但是如果图像的宽度固定为190px，宽度小于190px的图像会被拉伸。
max-width 标签仍然会限制最大图像宽度。如果没有宽度 =“190”，Outlook 将使用物理图像宽度，如果超过 190 像素，则会破坏模板。其他电子邮件客户端也将显示图像的全宽。

【解决方案2】：

可能会遇到这个问题，因为您可能会在项目中使用 CSS 以及那里的宽度和高度..您可以彻底检查整个 CSS 以及 HTML...

【讨论】：

这是一个html-email，没有外部css

【解决方案3】：

试试：

style="display:block;max-width: 100%; height:auto;"

【讨论】：

【解决方案4】：

这里是。你可以使用height: 100%和object-fit:cover

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

<table cellpadding="2" cellspacing="2" width="600">
    <tr>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/fb/e0/53ItYqFd_o.jpg" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" />
        </td>
        <td width="190" height="190" align="center">
            <img src="https://images.imgbox.com/13/e7/pM2IjFYr_o.jpg" />
        </td>
    </tr>
</table>

【讨论】：