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

Question

我有一个包含三个 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>

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

Answer 1

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

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

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