CSS Fluid Image Techniques for Responsive Site Design

“Responsive design” is not a single technology but a set of techniques* that allow web pages to serve the needs of both mobile and desktop users. The core components are:

• CSS3 @media queries
• Fluid images and video
• JavaScript, often triggered by window.matchMedia
• Server-side solutions
• SVG to create resolution-free images

A responsive site may utilize one, some, or all of these technologies, depending on the intentions of its designers. I’ve covered the basics of media queries in past articles; now it’s time to look at fluid images, a technique first suggested by Ethan Marcotte.

Web page text is fluid by default: as the browser window narrows, text reflows to occupy the remaining space. Images are not fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container. This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

Simple Fluid Images

One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set the max-width of the image at 100%:

1. <img src="royal-enfield-motorcycle.jpg" alt="Royal Enfield Motorcycle,
2. photographed by Renjith Sasidharan" style="max-width:100%;">

Images with this CSS will display at their native dimension so long as there is enough room in the HTML container to do so; as the browser window narrows, the images will scale to fit, as you can see in the illustration below

This works well, as with a few limitations:

• A large image (over ~ 420 pixels wide) will increasingly dominate the document as the viewport shrinks down, as its native size is greater than the width of most smartphones. Scaling means that the image won’t be cut off, but it may be large relative to text at small viewport sizes.

• The initial layout and setup of the document is affected: because you are not setting the image’s height and width explicitly in the CSS, the browser cannot reserve any space for the image in the page. This will often cause the layout to “pop” when the user visits the page for the first time, as fluid images are loaded and forced to fit into their newly determined size.

• Unless the image is already the full width of its container, this approach does not work well for HiDPI/Retina images: the image’s “actual size” will be shown as twice the width that you want it to be.

The basic max-width fluid image approach is a very good approach for article header and “hero” images, but for illustrations in body text, a more subtle approach is often required.

A Better Fluid Image Solution

A better, albeit more complex approach to fluid images is to measure the width of the image as a percentage of the overall width of the page.

For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy:

1. (500 / 1200 ) × 100 = 41.66%

We can plug this number in as the width for the image; typically, this would be done inline, as each image will often be a different dimension:

1. <img src="mount-mayon.jpg" alt="A photograph of Mount Mayon,
2. Phillipines, with the ruins of Cagsawa belltower in the foreground"
3. style="float: right; width:41.66%;margin-left:2rem">

With this approach, the image will always remain in scale with the rest of the text:

This accommodates Retina pixel-doubled images, but can run into issues at extremes of large or small viewport sizes, when the image might appear too big or small relative to the text. To get around this, we can place a max and/or min width on the image in pixels as upper and lower limits:

1. <img src="mount-mayon.jpg" alt="A photograph of Mount Mayon,
2. Phillipines, with the ruins of Cagsawa belltower in the foreground"
3. style="float: right; width:41.66%;margin-left:2rem;max-width:500px;">

The type of approach you use will depend on both the kind of image and the overall design of the site; there is also the possibility of transitioning the flexible images between breakpoints with a hybrid technique that utilizes media queries: we’ll look at that in the next article.

*I would expect that the CSS flexbox model will be added to that list in the near future.