Foreground images that scale with the layout

Simple CSS techniques can make the content images inside your liquid or elastic pages scale with the layout.

This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

One way to dynamically alter the footprint of an image is to make it literally scale, based on either the text size or the changing dimensions of its parent element. Both are elegant effects that are deceptively simple to create.

Both liquid and elastic scaling images start out with a regular img element in the (X)HTML:

<img src="styx.jpg" alt="my cat Styx">

Notice that this img element has no width or height attributes, as it normally would. You control the dimensions with CSS instead.

For a liquid image, create a CSS rule to set the image’s width to a percentage value:

img {
  	width: 50%;
  	}

Note: This rule will make all images 50 percent as wide as their parents. In a real page, you would probably add an id or class to the specific image you wanted to scale and use that id or class as the selector in the CSS.

No height value is necessary; the browser determines the height that will proportionately constrain the image’s dimensions. If you were more concerned about making the height of your image stay proportional to its parent’s height than you were with width, you could use the height property in the CSS and leave off the width property. Just make sure not to use the two together.

As with all percentage dimensions, the percentage width value you choose is relative to the width of the parent element. As you change the width of the parent element, the image scales to match.

If you want the image to scale with the text size instead of the width of the parent element, simply change the width value in the CSS to an em value:

img {
  	width: 20em;
  	}

Any time a browser scales an image, there’s going to be some distortion, but you can keep it minimal by starting out with a very large image so the browser will usually be scaling it down.

To assure that the browser always scales the image down, not up, you can set a maximum width on the image that matches its set pixel width:

img {
  	width: 20em;
  	max-width: 500px;
  	}

Tip: If the image must stay above a certain size to remain “readable,” add a pixel min-width value too.

Now the image will scale only until it grows to 500 pixels wide; thereafter it will act as any other fixed-width image.

Simulate image scaling with JavaScript

If you don’t want the browser to scale your images at all, yet you want them to change in size based on the amount of space available, you can use JavaScript to swap in differently sized versions of the same image. The JavaScript detects the user’s viewport size and chooses the appropriate version of the image to show. This works in the same way that resolution-dependent layouts swap in different CSS files based on viewport size.

A live site that uses image-swapping to simulate scaling is Art & Logic. There are four illustrations under the banner on the home page. Try narrowing or widening your browser window; the images don’t scale in real time in most browsers, but as soon as you stop moving the window, they jump to a different size to match the available new space.

2 Comments

You can follow the comments for this post through the comments RSS feed.

Leave a Reply