Auto image resize based on browser window dimensions

I have a basic web page layout with a 100% width header and a sticky footer. In between the two I hav开发者_如何学Goe a large graphic.

I would like the graphic to resize dynamically depending on the size of the window.

I prefer not to use flash, and was wondering if there is an easy way to do this with jquery/javascript.

I'm not much of a jquery/javascript expert so I was wondering how to approach this of there is a component out there that already does it.

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>

This will resize your image to match your container and keep the ratio in place. If you set the container to a percentage everything will scale.

wrapper width = 960px divided by screen width = 1640px

If you want the entire site to be responsive you have to do the math all the way down. divide the child by it's parent. Hope this helps!

Set the image containers width in percent as in width:{amount}%;, then set the image's width in percent also. This way your image container expands as your image expands also, or at least it will seem like so, because the image is actually expanding as the container expands. You dont necessarily need to set the image width to 100%, but whatever with you set is relative the containers width.

If you're willing to rely on CSS3 and display your image as a background in an element, consider using background-size. Going this route allows you to resize the image while preserving its aspect ratio.

Here's a quick example of background-size.

This can of course be done manually if you monitor the window size using JS and resize accordingly. If you are interested in going this route, let us know. I would advocate using a pure CSS solution for something so trivial, if possible, so you don't alienate users with JS disabled.

img.thespecialimage {
  min-height : 100%;
  min-width : 100%;
  max-height : 100%;
  max-width : 100%;
}