setting the image as well as div width according to the size of screen

I am using a div whose dimensions are set using jquery, but i wish to show an image in that div and i also want the image to resize 开发者_StackOverflowaccordingly to fit in the div exactly.

How can this be done ???

---

If you are using jQuery to handle the parameters of a DIV element, then you could use the same method to handle the height/width of the image. You could try something like:

var MyImg = document.getElementById(img_id);
var Div = document.getElementById(div_id);
document.MyImg.style.height = document.Div.style.height;
document.MyImg.style.width = document.Div.style.width;

If you want to leave a small border, subtract a few pixels from both the height and the width and align the image centrally both horizontally and vertically.

Addon: Alternatively, you couls set CSS attributes to: height: auto; width: auto;

I had understood you wanted to use jQuery, my bad...

---

You just need to set the image as the background of the div and set the background-size to 100%:

background: url(http://www.google.com/intl/en_com/images/srpr/logo1w.png) no-repeat;
background-size: 100%;

Working example (play with the div width if you'd like):

http://jsfiddle.net/KWKuG/

---

You can set a maximum width and height of 100% on the image with CSS:

img {
max-width:100%;
max-height:100%;  
}

This way, you will maintain the image's aspect ratio.

---

Not sure if you really want to skew the image like that, but you can just set that with css.

#yourDiv img { width: 100%; height: 100%}

example: http://jsfiddle.net/Shx3z/1/