如何在固定大小的表格单元格内按比例缩放图像

Posted 2023-03-05

【中文标题】如何在固定大小的表格单元格内按比例缩放图像

【英文标题】：How do I scale an image proportionally within a table cell of a fixed size

【发布时间】：2013-10-31 19:42:54

【问题描述】：

我有一个固定高度和宽度的表格单元格。在其中，我有一个大小和大小比例可能不同的图像。

我想让图像在表格单元格中水平和垂直对齐。此外，图像应与表格单元格的大小成比例缩小。

这是作为电子邮件模板的一部分，所以我没有现代 CSS 支持，所以我不能使用与背景相关的 CSS。我关心除了 Lotus Notes 之外的一切。您可以在此处查看支持的电子邮件 CSS 属性的完整列表：www.campaignmonitor.com/css。另外，obv.，没有 javascript。

任何帮助将不胜感激。

【问题讨论】：

你说你有一个表格和单元格......但我看到的只是空白：

我在网站上看到的不仅仅是空白。但是没有桌子！

@MrLister 该列表只是为了查看 css 属性列表——而不是我试图这样做的地方。这是一个电子邮件模板。

【参考方案1】：

你可以这样写 html

<table>
    <tr>
        <td style="width:250px; height:250px; background-color:red;text-align:center; vertical-align:middle">
            <img src="http://www.100marks.in/wp-content/uploads/2012/07/Sachin-Tendulkar-Pictures-Latest-2.jpg"
                style="max-height:100%; max-width:100%" />
        </td>
    </tr>
</table>

如果 max-width 和 max-height 不支持 Outlook 你可以给 width:auto 和 height:auto 参考 this (old link)

【讨论】：

max-width 和 max-height 不受 Outlook 支持，所以我不能使用它。

@Matt Vagni 而不是max-width:100%，你可以给width:autojsfiddle.net/yJUH4/4我正在编辑我的答案

将表格单元格减小到比图像更小 - 你会发现在这种情况下这不起作用：jsfiddle.net/yJUH4/6

"max-width: 100%" in img 标签帮助

【参考方案2】：

您需要将这些属性应用于表格单元格，并为您的图像提供固定大小，宽度或高度。它会自动缩放。

<td valign="middle" align="center">
     <img src="..."  />
</td>

【讨论】：

我不能这样做，因为我不知道宽度或高度是否是限制尺寸。图片是动态的，我没有这些信息。

那你不能按你的要求做。 HTML/CSS 无法检测图像的大小。

【参考方案3】：

Outlook 2013 的一些实验表明，如果图像显示在表格之外，Outlook 默认会将其宽度缩小到窗口宽度。因此，如果您可以在没有表格的情况下执行此操作，至少您不会在 Outlook 中获得水平滚动条。

（根据您的列表，所有其他电子邮件客户端都支持max-width 和max-height，因此其他任何电子邮件客户端都不会出现问题。）

但是，如果您事先知道包含表格单元格的高度和宽度，那么真正的解决方案是在发送图像之前在服务器端调整图像大小。这不仅可以解决问题，还可以节省带宽。

如果由于某种原因无法调整图像本身的大小，另一种方法是计算（服务器端）应该是什么大小并将其包含在 HTML 中。

如何做到这一点取决于您使用的模板系统；不幸的是，你没有提到任何关于那...