Liquid Layout out of Proportion

Question

I am using a liquid layout on my website, but when I view in in my browser I find that when I change the browser window size, the images are stretched out of proportion. Can anybody help?

Answer 1

In your CSS, ensure that for every image, either its width or height (usually height is appropriate) is auto (which is the default) rather than a specific value. This causes the height (or width) to be computed according to the other dimension and the aspect ratio of the image. (Reference: CSS 2.1 section 10.6.2)

For example, if you declare max-width: 100%; height: auto; for an image, then it will be no wider than the box/column it is inside, and it will scale vertically to match the horizontal scaling. Stack Exchange does this with images you include in questions and answers.

Answer 2

You should provide a test link.

Anyways your images must have a fixed width and height, and should not change their proportions while changing the window's size.

After an excessive window's downsizing, the whole layout would become a mess. But this is something unavoidable as far as i know.

Answer 3

You could get fancy with javascript and provide multiple images for steps of sizes or downsize intelligently with bicubic sampling and such. You cannot simply resize raster images without epic loss of quality.