CSS 如何在固定大小的表格单元格内按比例缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19526307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I scale an image proportionally within a table cell of a fixed size
提问by Matt Vagni
I have a table cell of a fixed height and width. Within it I have an image that can vary in size & size-ratio.
我有一个固定高度和宽度的表格单元格。在其中，我有一个大小和大小比例可能不同的图像。
I would like to have the image be horizontally and vertically aligned within the table cell. Also the image should be scaled down proportionally to the size of the table cell..
我想让图像在表格单元格中水平和垂直对齐。此外，图像应按表格单元格的大小按比例缩小。
This is as part of an email template, so I have no modern CSS support, so I can't for example, use background related CSS. I care about everything besides Lotus Notes. You can see the full list of supported CSS properties for emails here: www.campaignmonitor.com/css. Also, obv., no Javascript.
这是作为电子邮件模板的一部分，所以我没有现代 CSS 支持，所以我不能例如使用与背景相关的 CSS。我关心除了 Lotus Notes 之外的一切。您可以在此处查看电子邮件支持的 CSS 属性的完整列表：www.campaignmonitor.com/css。另外，显然，没有Javascript。
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by Dinesh Kanivu
You can do HTML like this
你可以像这样做 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>
If max-widthand max-heightnot supporting by outlook you can give width:autoand height:autoRefer this http://jsfiddle.net/yJUH4/4/
如果max-width并max-height没有前景支持你能给width:auto并height:auto请参阅本http://jsfiddle.net/yJUH4/4/
回答by Diodeus - James MacFarlane
You need to apply these attributes to the table cell and give your image a fixed size, either width or height. It will scale automatically.
您需要将这些属性应用到表格单元格，并为您的图像提供固定大小，宽度或高度。它会自动缩放。
<td valign="middle" align="center">
<img src="..." width="100" />
</td>
回答by Mr Lister
Some experiments with Outlook 2013 show that if an image is displayed outside of a table, Outlook scales its width down to the window width by default. So if you can do it without a table, at least you won't get a horizontal scrollbar in Outlook.
Outlook 2013 的一些实验表明，如果图像显示在表格之外，则默认情况下 Outlook 会将其宽度缩小到窗口宽度。因此，如果您可以在没有表格的情况下完成此操作，至少您不会在 Outlook 中获得水平滚动条。
(All other email clients support max-widthand max-height, according to your list, so it won't be a problem in any of those others.)
（根据您的列表，所有其他电子邮件客户端都支持max-width和max-height，因此其他任何电子邮件客户端都不会出现问题。）
The real solution, however, if you know beforehand what height and width the containing table cells are going to be, is to resize the images server-side before you send them. Not only will that solve the problem, it will also save on bandwidth.
但是，如果您事先知道包含表格单元格的高度和宽度，那么真正的解决方案是在发送图像之前在服务器端调整图像的大小。这不仅可以解决问题，还可以节省带宽。
If resizing the images themselves is not an option, for some reason, an alternative is to calculate (server-side) what the sizes should be and include those in the HTML.
如果由于某种原因无法调整图像本身的大小，另一种方法是计算（服务器端）大小应该是什么并将其包含在 HTML 中。
How to do this depends on what template system you are using; unfortunately you haven't mentioned anything about that...
如何做到这一点取决于您使用的模板系统；不幸的是，你没有提到任何关于那件事......
