Get images to fit your liquid design

Update: The simpler technique at the end.

While designing my new site I decided to make the layout completely liquid. That always means more work. But I wanted it to be wider than 800px, and at same time it should fit a 800×600 screen. Finally the whole site was liquid and I ran into problems. It simply doesn’t look good when your images stop at half of the total column width, because they should not be too big for lower resolutions. I had to find something that made the images as wide as the column.

Image running into navigation column

If you just put an image in a liquid column, that image defines some kind of min-width and destroys all your work, ’cause if you don’t pay attention, your images runs into other columns. Continue reading Get images to fit your liquid design