Test: centered, cropped images

As part of my explorations in liquid design, I'm exploring ways to use the overflow: hidden property — when browser windows become too narrow, I want images to get cropped rather than have the layout break up.

(Obviously, this is only meant for specific cases and images.) The cropping could occur on the left or right side of an image; in this case, I want to try to get the image equally cropped on both sides, assuming the most interesting area is in the middle.

This test page works well in Mozilla (Firebird 0.7, actually), but not in Internet Explorer 6. I'd be ever so grateful if you could help me find a reliable cross-browser technique.

The way it works is simple:

• I set my img's to position: relative and left: 50%, which places the image's left edge on the enclosing div's horizontal center;
• Then, I shift the image left by half its width (here, margin-left: 50px), which centers it on the div;
• Finally, I set the div's overflow to hidden, which hides the parts of the image that lie outside it. (If the image is wider than the div)

Here are three divs of varying widths. In Mozilla, the image is centered inside each div, and cropped if the div is too narrow. But not in IE. Thanks for your help.

Update: It now seems to work in IE6; perhaps the old "modified style sheets do not reload well" bug? In the meantime, I've set up a second test page using a different technique.

Charles Blaquière, blaq@blaqzone.com