javascript - Auto image resize based on browser window dimensions

Question

I have a basic web page layout with a 100% width header and a sticky footer. In between the two I have 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.

Answer 1

<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!