14

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

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

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

任何帮助将不胜感激。

4

3 回答 3

18

你可以像这样做 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-heightwidth:autoheight:auto

于 2013-10-22T19:20:00.730 回答
1

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

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

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

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

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

于 2013-10-23T07:16:01.607 回答
1

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

<td valign="middle" align="center">
     <img src="..." width="100" />
</td>
于 2013-10-22T19:17:14.317 回答