Source (mailchimp) : http ://templates.mailchimp.com/development/responsive-email/fluid-images/

<img src="" alt="" height="" width="" class="emailImage" />
<style type="text/css">
    @media only screen and (max-width : 480px)
{
        .emailImage
        {
            height :auto !important ;
            max-width :600px !important ;
            width : 100 % !important ;
}
}
</style>

When the email is viewed on a screen that is 480px and smaller, the image has its height and width overridden, it also gets a max-width designated so that the image doesn’t look blown out proportion. As a rule of thumb, the max-width should be the same as the image’s original width. What we end up with, once the media query is triggered, is an image that fits on a small display.

Classés dans :