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

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.

---

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.

---

Unfortunately there are not much CSS properties that are widely supported in email clients.

Here is a chart about the current situation.

I can only think of an option like what @Groovetrain suggested, or instead generating thumbnails programmatically from the images, storing them, and using those in the email.

---

If you can't do a programmatic solution like Groovetrain suggested, the best route is to

1. Know the max & min dimensions that are possible for the image that'll appear.
2. Make sure the containing element allows for the max dimensions.
3. In the containing element, set the horizontal & vertical alignment (and if necessary the padding) so that the email looks acceptable with both the largest and smallest possible images.

I work with an email system with limited API support, so sometimes I have had to put my foot down and insist that the images we're working with be resized before being uploaded.

---

I know this is old, but I've just had to implement this. Based on what Groovetrain suggests - programmatically looking at the image when you build your email html code - here's some C# ASP.NET code that restricts the width of an image to 600 if it is too large:

string imgPth = HttpContext.Current.Server.MapPath("/images/yourimage.jpg");
System.Drawing.Image img = System.Drawing.Image.FromFile(imgPth);
string emailImage = "<img src='http://www.yourdomain.com/images/yourimage.jpg'";
if (img.Width > 600)
    emailImage += " width='600' style='width:600px;'";
emailImage += "/>";

Then obviously add emailImage to your email body.

---

You can use this method to control width :

<table width="100%"> <!-- a width 100% container -->
   <tr>
      <td></td> <!-- an empty cell, which will adapt its width -->
      <td width="200"> <!-- it's like max-width:200px -->
          <img src="your_image" width="100%" />
      </td>
      <td></td> <!-- another empty cell, which will adapt its width -->
   </tr>
</table>

This tip should work. If your screen is less than 200px wide, image should appear smaller too ! By default, image will be center ! If you want it to be aligned left or right, try delete the 1st empty cell, or the last (depending on what you wanna do !)

For max-height, i have no idea... In this case, height will be auto-calculated !

Hope that will help you mates !

Edit : i agree with the best answer ! If a script constructs your email, ask your script to pick up the width and height, and adapt your code. it should work...

---

I toke the programmatic solution from Groovetrain into pseudocode (and later into Twig for Shopware 6 mails):

maxWidth = 75
maxHeight = 75

realWidth = 444
realHeight = 1096 

widthRatio = realWidth / realHeight = 0.4051094890510949
heightRatio = realHeight / realWidth = 2.468468468468468
 

if realWidth > realHeight 
  // use max height
  newHeight = maxHeight
  newWidth = newHeight * widthRatio
else
  // use max width
  newWidth = maxWidth
  newHeight = newWidth * heightRatio


results width = 30.3832116788 and height = 75