Is there any way to resize the images based on screen resolution with out using javascript?

Question

I am planning to use a big banner image in my website(976X450).Now in higher resolution monitors the image should stretch to occupy the space. Is there any way to do this with out using different images for different resolution?

Answer 1

Just start with the detection of screen dimensions and continue from there:

var width = screen.width;
var height = screen.height;

var img = document.getElementById(image_id);

img.height = img.height * width / img.width;
img.width = width;

Update:

Use CSS:

img#in_question { width: 100% }

Answer 2

Have you tried using percentages?

<img src="Images/YourImage.png" style="width:100%; height:20%;" alt="I am an image with %" />

or a bit neater with CSS:

HTML:

<img src="Images/YourImage.png" id="HeaderImage" />

CSS:

#HeaderImage {
   height: 20%;
   width: 100%;
}

Answer 3

HeaderImage {

height: 20%; width: 100%; background-repeat:repeat-x;

}