How can I create a max-width and max-height effect on an image sent in an HTML email?

Question

My app sends out HTML emails containing one or more images of unknown size and width/height ratios. The effect I want is

<img style="max-width: 200px; max-height: 200px;" src="..." />

however, it seems like most email clients, including Gmail and Outlook 2010, ignore this css. Simply setting width and height doesn't work because the image is not square, and I don't know the size and ratio ahead of time.

Answer 1

With unknown sizes of images, the programmatic route will work: while processing/building your email, you'll have to peek at the dimensions of the images and set the height and width accordingly in the html.

This way you'll be sure to have correctly scaled images across all (or most:) ) clients.