print | web | services | sandbox | contact
Dzin Forge Logo

Dzin Forge: Problem solving graphic design applied
across a broad range of media.

Picture of Dandelion

Play around resizing the browser window

A really great way to resize images in a liquid layout using CSS, there's no need to resort to Flash or Javascript to resize images on the fly. I learned about this technique after reading CSS Mastery: Advanced Web Standards Solutions by Andy Budd. The principle is fairly easily and you can view the code of this page to see how it was done.

Essentially though you need a container at 100% of the page and then use the img selector ie #container img to hook the image. Make sure the image has no size attributes given. Then set the image via CSS to occupy a percentage of it's container, in this case 40%, subtract padding and assign the p tag the remainder of the space ie #container p is set to a width of 50%.

One key to this is to make sure to use a max-width: attribute on the img selector and possibly the p selector. If the browser window expands beyond the max image size it will pixilated the image and text lines may grow beyond what your eye can follow.

© 2005-2008 Dzin Forge
743 Jepson Ave.
Salt Lake City, UT 84106