Proportional scale images on window resize?

Proportional scale images on window resize?

Hi all

I’m trying to re-create a page like this:

this a demo of an old flash site I did years ago.

I want to recreate the window resize function with html/jQuery.

When the window is resized the thumbnails stay the same size at the
bottom of the image and the image scales proportionally.

I’ve got it sort of working here:

I’m using jQuery cycle to create the slideshow and thumbnails.

When the page loads the large image is the correct size and scales when the window is resized.

When a thumbnail is clicked the images doesn’t load at the correct size. When the window is resized it
goes to the correct height but the width doesn’t change.

How can I load the image at the correct height and width when a thumbnail is clicked. And keep it proportional
when the window is resized.

Hope someone can help. Any help is greatly appreciated.

<!DOCTYPE html>
  <title>Title of the document</title>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <link rel="stylesheet" type="text/css" href="">
  <style type="text/css">
    #footer {
      height: 100px; 
    div#thumbWrap {
      position: relative;
      height: 100px;
      width: 400px;
      overflow: auto;
      margin:0 0 0 50px;
    ul#thumbs {
      display: block;
      height: 110px;
      width: 1500px;
      padding: 15px 0 0 15px;
      margin: 0;
      background: url('navigation.png');
      list-style: none;
    ul#thumbs li {
      display: block;
      float: left;
      padding: 0 4px;
    ul#thumbs a {
      display: block;
      text-decoration: none;
    ul#thumbs img {
      border: 3px #fff solid;
    ul#thumbs a:hover img {
      opacity: 0.5;
  <div id="content">
    <img src="images/01.jpg" alt="" />
    <img src="images/02.jpg" alt="" />
    <img src="images/03.jpg" alt="" />
    <img src="images/04.jpg" alt="" />
    <img src="images/05.jpg" alt="" />
  </div><!-- #content -->
  <div id="footer">
      <div id="thumbWrap">
        <ul id="thumbs">

  <script type="text/javascript">
    $(window).load(function() { 
          fx:     'fade', 
          speed:  'fast', 
          timeout: 0, 
          pager:  '#thumbs', 
          pagerAnchorBuilder: function(idx, slide) { 
              return '<li><a href="#"><img src="' + slide.src + '" width="auto" height="50" /></a></li>'; 
      var div = $('div#thumbWrap'), ul = $('ul#thumbs'), ulPadding = 15;
      var divWidth = div.width();
      var lastLi = ul.find('li:last-child');
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;        
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;         
      $content = $('#content');
      var footerHeight = 0,
      footerTop = 20,
      $footer = $("#footer");
        function positionFooter() {
          footerHeight = $footer.height();
          footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
          var imgHeight = $('#content img').height();
          var imgWidth = $('#content img').width();
          var ratio = imgWidth/imgHeight;
          $('#content img').height($content.height());
          //$('#content img').width(ratio*imgWidth);
          if ( ($(document.body).height()+footerHeight) < $(window).height()) {
          } else {