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.

Related Posts:

Did you like this?

29 Responses to “Foreground images that scale with the layout”

  1. David Lindes

    I’ve just begun to explore the responsive web design world, and I find it fascinating. However, I’m a bit weary of lack of support by older browsers. What browsers support this technique, as well as the one you mention in another post – dynamic cropping?

    Thanks!

    David

    Reply
    • Zoe Gillenwater

      What browsers support responsive web design, or what browsers support scaling images? If you mean the former, it’s basically everything except IE 8 and earlier (but that’s OK since it’s mainly of benefit to mobile, most of which aren’t running IE; plus there’s a script for IE), and if it’s the latter, it’s everything–no fancy CSS3 here! Same thing with the dynamic cropping technique–IE supports it. IE 6 can’t do the min and max-width, if you decide to include that, but that doesn’t stop the overall technique from working–it’s just a nice fail-safe for the small minority of people on the fringe of viewport or text size. Also, there are numerous min and max-width scripts you can use for IE if you want to be super careful. So to summarize: all of the scaling image techniques that I outline in Chapter 9 of Flexible Web Design are quite safe to use in production now!

      Reply
  2. Dave Margolis

    Have you ever tried to scale an image to wider than it’s native dimensions? I have a 1024×768 image with:

    ———–
    img {
    width: 100%;
    height:auto;
    }
    ———–

    But when the parent element is larger than 100% (as on a big monitor), it doesn’t scale up as I want it to; it stops at it’s native width dimension of 1024.

    I have tried “img {width:100%}” and that didn’t work (not that it wouldn’t have created other issues, but I wanted to see what it would do).

    Have you ever run into this?

    Thanks
    Dave

    Reply
    • Zoe Gillenwater

      Dave, I don’t believe I’ve run into the issue you’re talking about. I’ll have to test it. Do you have a page I could look at?

      Reply
  3. Jeremiah Reagan

    Zoe, I’m having the same issue that Dave is having, I think. I’m also trying to use an image that is Dave’s dimensions of 1024X768, any suggestions?

    Reply
    • She

      Hi Guys
      Does anyone resolve the problem that raised by Dave? Check it through internet but no answer came up, so Zoe it is hoped that can get your hand to figure out something and put up an answer, best regards.

      Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>