How do I scale an image proportionally within a table cell of a fixed size

Question

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.

Any help would be greatly appreciated.

Answer 1

You can do HTML like this

<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-width and max-height not supporting by outlook you can give width:auto and height:auto Refer this (old link)

Answer 2

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>

Answer 3

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.

(All other email clients support max-width and max-height, according to your list, so it won't be a problem in any of those others.)

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.

How to do this depends on what template system you are using; unfortunately you haven't mentioned anything about that...