Since my first test performed poorly in Internet Explorer, I decided to try another version of the technique. Instead of positioning images inside divs (with overflow:hidden), I will define the images as backgrounds for the divs.
As part of my explorations in liquid design, I'm exploring ways to prevent the layout from breaking up if the browser window becomes too small. In this case, I want images to get cropped when that happens. You can see this technique put to good use in context. (Sample page) See how it may be better, in some cases, to lose (presumably unimportant) parts of images, rather than have them jump around and break your layout?
This test page works well in Mozilla (Firebird 0.7, actually) and Internet Explorer 6. It seems I should investigate this technique further.
The way it works is simple:
(Obviously, this is only meant for specific cases and images; this is not a design panacea.) Depending on the image's content, the cropping could occur on the left or right side of an image; we could also crop both sides equally if the important part of the image lies in the center.
At this point, I'd like to get the technique to work with all crops (left-crop, right-crop, or both sides) and with all image positions within the div (left-aligned, right-aligned, and perhaps centered.) I'm making good progress, but in some cases I can't figure out the appropriate coding. Please look at the sample page at http://www.kpuc.org/events/90th-anniversary-test.html and let me know if you have a solution to the generalized problem. This technique will greatly help in designing liquid pages that squash much further than expected. Thanks!
Charles Blaquière, blaq@blaqzone.com
In the following tests, a border is added to the divs to make the results evident.