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:-

enter image description here

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?

Good luck on making it work with _all_ email clients. You will fail. If nothing else, Outlook will stop you. — Uwe Keim, Aug 21 '13 at 05:50

Ms. Nobody · Answer 1 · 2013-08-15T08:46:46.137

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

score 1 · Answer 2 · answered Aug 21 '13 at 12:13

1

Use inline styles. Like this: <img style="width: 100%; height: auto;" ...
Ensure your img tag is not in container that sets or restricts height of the image
If you still need a container or have difficult interaction with other styles, use max-width, not width. <img style="max-width: 100%" >

answered Aug 21 '13 at 12:13

Dmitry Kaigorodov

1,512
18
27

The email is already providing him with 100% width. He has no more space to show the image in. – Afzaal Ahmad Zeeshan Aug 21 '13 at 23:06

score 1 · Answer 3 · answered Aug 21 '13 at 23:05

In the following image, you can see that the actual email body starts under the to object of email. I am not able to understand why do you want to do something more wide.

From your image: The image image you are providing, the photo is scaled correctly. It fits the div wrapping it, from left to right.

In my image: Well its just a text, but you can see the text starts just under the to object.

Result: You can not scale or make the image wider than this. However, I am sure you understand that you when you set the width to 100%. The browser actually does provide a 100% width from that width. Exceeding this size will maybe cause a bit problem in UI and gmail will never allow you that.

I hope you get my point.

how to scale image in email body?

3 Answers3