Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question

migrated from superuser.com Feb 20 '11 at 19:34

This question came from our site for computer enthusiasts and power users.

3 Answers 3

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.