Set image size in relation to screen resolution

Question

I am trying to create a website for myself. I want to use the image as a title ... I made sure that my background will scale for any screen resolution ... How can I make sure the image (title) also scales it to fit the screen resolution ...

for example: my image is 350px int width and 130px high. I want it to be a size when the screen resolution is 1280X768 .. and should change proportionally based on the screen size.

Please tell me how to do this using CSS. I am also very good at js or jquery

Thanks in advance Raj

Answer 1

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

In your example, you need to specify width: 27% (1280/350). Please note that the parent must be 100% wider.

Answer 2

You can get the screen size from the DOM with screen.width and screen.height . You can then write JS to load or replace the image you want, or adjust the height / width attributes on the image (which will scale it, but not always look great).

Answer 3

There is a good article on Ethan Marcott's fluid networks, http://www.alistapart.com/articles/fluidgrids/

You can apply these principles to your images using CSS, he does this on his personal website. There are even good apps to help you.

It has a read by me → web duck http://inteldesigner.com/web-duck/about.php

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