Fluid Images

Having your images resize on small screens is one of the most important benefits of using media queries, especially where email is concerned. Since one of the most common media query trigger sizes for emails is 480px (the width of most phones in landscape orientation), images wider than that 480px would result in some horizontal scrolling, which should generally be avoided.

Making an image fluid, however, solves that problem. By virtue of being fluid, the image is also adaptable to different media query trigger sizes. Here’s our example image and the code behind it:

<img src="" alt="" height="" width="" class="emailImage" />

Pretty simple stuff. Now onward to the media query CSS:

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

The image is fluid, so it will fill its available space regardless of whether the screen orientation is portrait or landscape, and readers don’t have to deal with horizontal scrolling.