How to dynamically resize an image inside an email client?

Question

Are there ways to resize an image to fit thew window the image is being viewed in WITHOUT javascript and limited CSS?

I ask because I have an email campaign that I send out that features a main image that I want as large as possible without scrolling. I have read ways to do this with javascript and jQuery but I do not see a way to do this that the majority of email clients will read and react to properly. Is this possible? And if so - How?

Solution 1

This is how you should be able to do it

---

    /****this is the Css****/
    .full {
     width:100%;
     height:auto;
     }
    /***end Css***/
   <!--Now the html--!>
   <section>
   <img src="image/main.png" class="full">
   </section>

Or you can go the simple way *update

you can do it like this

    <img src="image/main.png" style="width:100%; height:auto; border:none;" />

and if they have an option to put it as html to do it like that as it should render correctly like that

Solution 2

This is the correct way to do it for a html email:

<img alt="" src="" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">

It will auto resize to match the width of the container element (which should always be a <td>).

Note that on some clients (Outlook '07, '10 & '13 in particular), the image will not exceed it's maximum dimensions. If you are working with a max-width fluid template this will not be an issue providing your image width matches the max width.

Solution 3

You need to be as archaic as possible to make HTML emails work across all clients.

Inline styles and HTML 4 code should do the trick. Be warned though - max-width and max-height works in most clients, but this does NOT include Outlook 2007/2010/2013/365 which could well be over half of your target audience. Width works in all clients - but NOT on div and p tags in Outlook 2007/2010/2013/365! Always use tables not divs to be certain it will work.

Basically, always assume something isn't going to work and design for the smallest possible margin for error - and ALWAYS use inline styling or it might well get stripped.

If in doubt consult the oracle, I always do :)

Source: https://www.campaignmonitor.com/css/b/