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!

Answer 2

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.