Menu
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.
561
The height and width of an image can be set using height and width attribute. The height and width can be set in terms of pixels. The <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.
The max-width property sets a maximum width for an element, which does not allow the width of that element to be larger than its max-width value (but it can be smaller). Therefore, you can define a max-width property for the image and set it to 100%, which shrinks the image of 500px to the space of 360px.
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.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
