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％用于图像样式。这样可以在不拉伸图像的情况下将较大的值（高度或宽度）最大化到单元格（或高度）。

编辑：新手...添加代码段。由于你的风格是内联的，我就这样离开了。

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

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

Answer 3

尝试：

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

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

HTML电子邮件 - 在表格单元格中显示图像

4 个答案: