set image size with respect to the screen resolution

Question

hey guys,

I am trying to build a website for myself.. I want to use an image as the header... I have made sure that my background will scale itself for any screen resolution... How do i make sure the image(header) will also scale it self according to the screen resolution...

for example: my image is 350px int width and 130px in height.. i want this to be the size when screen resolution is 1280X768.. and should change proportionally based on screen size..

Please tell me how to do this preferably using CSS.. i am also fine with js or jquery

Thanks in advance Raj

Answer 1

You can get the screen size from the DOM using screen.width and screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/width attributes on the image (which would scale it, but doesn't always look great).

Answer 2

If you only specify the width in css, the height will scale automatically. You can easily specify the with of the image relative to its parent.

In your example you would have to specify width: 27% (1280 / 350). Note that the parent will have to be 100% wide.

Answer 3

There is a good article on fluid grids by Ethan Marcotte, http://www.alistapart.com/articles/fluidgrids/

You can apply these principals to your images using CSS, he does on his personal site. There even good apps to help you out.

this one has a read me -> web duck http://inteldesigner.com/web-duck/about.php

this one has more features -> em calc http://riddle.pl/emcalc/