超文本标记语言电子邮件-适合表格单元格中的图像 [英] HTML emails - Fit an image in a table cell

问题描述

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

这篇关于超文本标记语言电子邮件-适合表格单元格中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！