Fluid Image Experiment

We’ve all seen the problem; one oversized image gets dropped into a fluid layout and things go haywire.

Richard Rutter a.k.a Clagnut has made a valiant attempt at solving the problem using just CSS and, should Internet Explorer not register within your support matrix, a viable CSS solution has been found (See item 8 – bizarrely placed between item 3 and item 4 over at Richard’s demo page, namely, “A medium image with a max-width of 100% and no height set”).

Unfortunately, we still haven’t reached that web development “Shangri-La” in which Internet Explorer can effectively be ignored and so the use of a little JavaScript trickery may be a viable interim solution.

I’ve coded a small experiment that seems to, within the bounds of my minimal testing, successfully rescale oversized images to fit their parent containers width.

There are caveats of course, the solution requires JavaScript to be active and, as usual, a few Internet Explorer quirks need taken into consideration; namely, the requirement of the parent element to have overflow:hidden assigned within the CSS and the use of the non-standard offsetWidth and currentStyle object properties when calculating the parent elements width.

Tested in Internet Explorer 6, Opera 8 and Firefox.

View the fluid image experiment.