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

Question

我有一个固定高度和宽度的表格单元格.在其中我有一个可以在大小和大小比例上变化的图像.

我想让图像在表格单元格中水平和垂直对齐.此外,图像应按比例缩小到表格单元的大小.

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

任何帮助将不胜感激.

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>

如果max-width并max-height没有前景支持你能给width:auto并height:auto请参阅本http://jsfiddle.net/yJUH4/4/

http://jsfiddle.net/yJUH4/2/ [旧]

Answer 2

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

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