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

Question

我有一个固定高度和宽度的表格单元格。其中放置了一张图片，该图片的大小比例可能会变化。

我希望这张图片在表格单元格内水平垂直居中对齐，并且按比例缩小以适应表格单元格的大小。

由于这是电子邮件模板的一部分，因此我没有现代CSS支持，所以我不能使用与背景相关的CSS，但我关心除Lotus Notes之外的一切。您可以在此处查看电子邮件支持的所有CSS属性列表：www.campaignmonitor.com/css。当然，也不能使用JavaScript。

任何帮助都将不胜感激。

- Matt Vagni

---

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

我在网站上看到了很多东西，除了空白的地方。但是没有表格！ - Mr Lister

@MrLister那个列表只是为了查看CSS属性列表，而不是我正在尝试做这件事。这是用于电子邮件模板的。 - Matt Vagni

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

如果Outlook不支持max-width和max-height，可以使用width:auto和height:auto。请参考这里（旧链接）。

- Dinesh Kanivu

---

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

@Matt Vagni 你可以使用width:autoд»Јж›їmax-width:100% http://jsfiddle.net/yJUH4/4/ 我正在编辑我的答案 - Dinesh Kanivu

将表格单元格大小缩小到小于图像大小-您会发现在这种情况下不起作用：http://jsfiddle.net/yJUH4/6/ - Matt Vagni

在 img 标签中使用 max-width: 100% 可以帮助。 - Bronek

Answer 2

你需要将这些属性应用到表格单元格，并为图像指定固定大小，可以是宽度或高度。它会自动缩放。

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

- Diodeus - James MacFarlane

---

我无法做到这一点，因为我不知道宽度还是高度是限制大小。这些图像是动态的，我没有那些信息。 - Matt Vagni

那么您无法做到您所要求的。HTML/CSS无法检测图像的大小。 - Diodeus - James MacFarlane

Answer 3

一些针对Outlook 2013的实验表明，如果图片显示在表格之外，则Outlook默认将其宽度缩小到窗口宽度。因此，如果您可以不使用表格来完成它，至少在Outlook中就不会出现水平滚动条。

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

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

如果由于某种原因不能调整图像本身的大小，则另一种选择是计算（在服务器端）应该是什么大小，并在HTML中包含这些大小。

如何做到这一点取决于您正在使用的模板系统；不幸的是，您没有提及任何相关信息...

- Mr Lister