超文本标记语言电子邮件-适合表格单元格中的图像

2022-04-05 00:00:00 html-email html-table html css

我有一个表,其中有三个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>

我在三个单元格中尝试了三种不同的样式--没有一种给我图像调整大小的结果。如果有任何帮助,我很感激。谢谢。


解决方案

尝试使用-max-Width:100%和max-Height:100%作为图像样式。这将最大限度地将较大的值(高度或宽度)放大到单元格的witdh(或高度),而不会拉伸图像。

编辑:这是新功能...添加代码片段。由于您的样式是内联样式,因此我将其留在原处。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
<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>

相关文章