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.
I’ve already written about how to make images literally scale, but another way to change the amount of screen area an image takes up is to dynamically change how much of the image is shown at any given time. The image itself doesn’t change in size—the amount of space in which it’s allowed to show does, and the rest of the image just remains hidden outside of that space. I call this “variable cropping.”
You can create a variable cropping effect with either background or foreground images. Both look the same, but each is specially suited to different situations.
Variable cropping with background images
Putting the image that you want to dynamically crop in the background is ideal when the image is purely decorative. This technique lets you keep the image in the CSS with the other decorative images, so if you later change the look of the site, all the decorative images can be changed in a single style sheet instead of having to replace multiple img
elements across multiple pages of the site. By keeping the decorative image as a CSS background, you’re also making it likely that the image won’t print when the user prints the page—background printing is turned off by default in all major browsers—so the user can save ink by printing only content.
To use a CSS background image, you’ll fi rst need an element on which to place the background. This example will use a div
:
<div id="background"></div>
The div
is completely empty; it contains no content, but exists simply to hold a background image. If you have a more semantic element you can hang the background on instead, use it. For instance, perhaps the image you want to dynamically crop sits above an h3
element and matches it in width. You could add the image as a background to the h3
element and give the h3
enough top padding to make sure its text sits below the image, not on top of it.
Next, create a rule for this div
that sets the image as its non-tiling background:
div#background {
"foreground">
<img src="/img/spacer.gif">
Note: The img
element has an alt
attribute providing the text equivalent of the image. You can’t do this with a CSS background image.
Just as before, the div
needs to have a flexible width and a height set to the pixel height of the image:
div#foreground {
%;
px;
border: 2px solid #000;
}
So far, all we have is a regular div
holding a regular image—there’s nothing yet that makes this a variable cropping technique. If the image is bigger than the div
, it doesn’t get cropped, but simply overflows.
To get the cropping effect, add overflow: hidden;
to the CSS rule:
div#foreground {
overflow: hidden;
%;
px;
border: 2px solid #000;
}
Now whatever portion of the image would overflow out of the div
is hidden from view.
Once again, though, it would be better for this image to be cropped from the left side, not the right. We can’t use the background-position
property this time because it’s not a background image. To change how a foreground image is anchored within its parent, you can float the image:
div#foreground img {
float: right;
}
This anchors the image to the right side of the div
, so more or less of its left side shows as the div
changes in size. Using a foreground image results in an effect that looks exactly like using a background image, but the foreground image has alternative text, and you could also easily add a link to it.