HTML 电子邮件 - 将图像放入 table 单元格

Question

我有一个 table 和三个 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>

我在三个单元格中尝试了三种不同的样式 - none 给了我调整图像大小的结果。任何帮助表示赞赏。谢谢。

Answer 1

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

Answer 2

尝试：

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

Answer 3

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

编辑：新内容...添加代码片段。由于您的样式是内联的，所以我就这样保留了它。

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

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

HTML 电子邮件 - 将图像放入 table 单元格

HTML emails - Fit an image in a table cell

html

css

html-table

html-email