Variable Width Website

Question

I try to create a variable width website, but i have a problem with the images. I want to site to have bigger images and fonts on wider monitors, and smaller for normal ones. The solution i thought about was using percent, but the images (For the buttons, background and header) look kind of bad when they are resized. Is there another solution for resizing images and content dependeing on browser width?

Thank you

Answer 1

First thing to do is to check whether you really need those images. I haven'y seen them, so I assume you need them badly.

But you don't actually need any javascript to do that.

Depending on the audience you're targetting and the time you've got to build your website, you can try this to use CSS media queries to determine the width of the user's display. (You can learn more here: http://www.alistapart.com/articles/responsive-web-design/) You can check the target display resolution with simple CSS conditional statements. If you know what kind of display types are the most popular among your prospective guests, you can prepare 3-4 different sets of various sized images for various users.

This way you can deliver different sizes of images to different user resolutions.

But first make 100% you need the images and you cand achieve the same effect with CSS.

Answer 2

You probably need a mixture of JavaScript and CSS; use JavaScript to determine the dimension of the screen, and use it to calculate the ratio for your re-sizing, and change the CSS property of the objects.

You may also want to use sizes in em instead of pixels when doing the style sheets.

When resizing images, you also have to keep in mind the aspect ratio, so you cannot just apply a percentage value to both the width and height.