how to scale image in email body?

Question

How to scale image in email body ?

I am adding html template in an email.And there is an image in that template.

And i wants,the image should be fit according to email client width.And the height should be adjust according to image width.Something like this:-

It should work in all email providers.

FYI,i am working on ASP.NET application.

Edit:

I sets the image width 100% and i am not setting the image height there.

Is this a best or correct way for it?

Answer 1

I would go for setting:

width: 100%;
height: auto;

Demo: http://jsfiddle.net/gjtC9/ Without CSS: http://jsfiddle.net/gjtC9/2/

The question if it's the best and correct way.. well if someone opens the email on a mobile phone where is the resolution quite small - so the huge image is scaled to smaller one quite a lot.

-> The phone will be loading huge image which will be scaled to small - this brings me more to question, is that picture really necessary? Are you going to put there those pinguins or some image that has some information or something valuable on it? :D

Answer 2

1. Use inline styles. Like this: <img style="width: 100%; height: auto;" ...

2. Ensure your img tag is not in container that sets or restricts height of the image

3. If you still need a container or have difficult interaction with other styles, use max-width, not width. <img style="max-width: 100%" >