how to make image slider shrink size with the window size

[pydrorway]

i have an image slider with this code:\[code\] #sliderFrame { position: relative; width: 100%; margin: 0 auto; }#slider { width: 100%; height: 306px;/* Make it the same size as your images */ background: #fff url(loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999;}#slider img { position:absolute; border:none; display:none;}\[/code\]as you can see the width is 100% and i have done the same on the rest of the code but its not re sizing when the window is resized. any ideas what i can do?the full code is in the fiddle: http://jsfiddle.net/charliejsford/cXwDg/EDIT: added HTML\[code\]<div id="sliderFrame"> <div id="slider"> <a href="http://www.menucool.com/jquery-slider" target="_blank"><img src="http://stackoverflow.com/questions/15788940/images/image-slider-1.jpg" alt="Welcome to Menucool.com" /></a> <img src="http://stackoverflow.com/questions/15788940/images/image-slider-2.jpg" alt="" /> <img src="http://stackoverflow.com/questions/15788940/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /> <img src="http://stackoverflow.com/questions/15788940/images/image-slider-4.jpg" alt="#htmlcaption" /> <img src="http://stackoverflow.com/questions/15788940/images/image-slider-5.jpg" /> </div> <div id="htmlcaption" style="display: none;"> <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>. </div> </div>\[/code\]