Proportionally scale image on window resize

Hi all

I have a demo here to illustrate my problem

http://www.ttmt.org.uk/forum/gallery1/

It’s a simple list of images at scrolls across the page.

When the image is clicked a larger image appears above it, lightbox style.

I want the height of this image to be a percentage of the height of the window (85%) and the width to adjust proportionally.

If the window is resized I would like the image to scale proportionally.

In Safari the large image appears at the correct height and scales proportionally when the height is changed but doesn’t scale correctly when the width is changed less then the width of the image.

In Firefox the large image doesn’t appear at the correct height and doesn’t scale when the height is changed but it does scale proportionally when the width is changed.

How do I get the image to appear at the correct height and scale proportionally across browsers.



<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">

  <style type="text/css">
    ul#gallery {
    	margin:100px 0 0 0;
    	
    	float:left;
    	height:500px;
    	margin-right:-20000px;
    }
    ul#gallery li{
      display:inline;
    }
    ul#gallery li img{
      float:left;
      height:100%;
    }
    #header{
      position:fixed;
      margin:20px 0 0 20px;
    }
    #header img,
    #header ul#info{
      float:left;
    }
    #header ul#info{
      margin:5px 0 0 50px;
    }
    #header ul#info li{
      color:#aaa;
      font:.95em/1.5em Helvetica, sans-serif;
    }
    #header ul#info li a{
      color:#aaa;
      text-decoration:none;
    }
    #header ul#info li a:hover{
      color:#333;
    }
    #header select{
      margin:20px 0 0 50px;
    }
    #lightbox {
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:url(overlay.png) repeat;
			text-align:center;
		}
		#lightbox p {
			text-align:right;
			color:#fff;
			margin-right:20px;
			font-size:12px;
		}
		#lightbox img {
			box-shadow:0 0 15px #111;
			-webkit-box-shadow:0 0 15px #111;
			-moz-box-shadow:0 0 15px #111;
			max-width:940px;
		}
		#content img{
		  height:85%;
		  max-width:100%;
		}
  </style>

  </head>

<body>

  <ul id="gallery">
    <li><a href="images/01.jpg" class="lightbox_trigger"><img src="images/01.jpg" /></a></li>
    <li><a href="images/02.jpg" class="lightbox_trigger"><img src="images/02.jpg" /></a></li>
    <li><a href="images/03.jpg" class="lightbox_trigger"><img src="images/03.jpg" /></a></li>
    <li><a href="images/04.jpg" class="lightbox_trigger"><img src="images/04.jpg" /></a></li>
    <li><a href="images/05.jpg" class="lightbox_trigger"><img src="images/05.jpg" /></a></li>
    <li><a href="images/06.jpg" class="lightbox_trigger"><img src="images/06.jpg" /></a></li>
    <li><a href="images/07.jpg" class="lightbox_trigger"><img src="images/07.jpg" /></a></li>
    <li><a href="images/08.jpg" class="lightbox_trigger"><img src="images/08.jpg" /></a></li>
    <li><a href="images/09.jpg" class="lightbox_trigger"><img src="images/09.jpg" /></a></li>
    <li><a href="images/10.jpg" class="lightbox_trigger"><img src="images/10.jpg" /></a></li>
    <li><a href="images/11.jpg" class="lightbox_trigger"><img src="images/11.jpg" /></a></li>
    <li><a href="images/12.jpg" class="lightbox_trigger"><img src="images/12.jpg" /></a></li>
    <li><a href="images/13.jpg" class="lightbox_trigger"><img src="images/13.jpg" /></a></li>
    <li><a href="images/14.jpg" class="lightbox_trigger"><img src="images/14.jpg" /></a></li>
    <li><a href="images/15.jpg" class="lightbox_trigger"><img src="images/15.jpg" /></a></li>
  </ul>


<script>
  jQuery(document).ready(function($) {

  	$('.lightbox_trigger').click(function(e) {

  		e.preventDefault();

  		var image_href = $(this).attr("href");

  		if ($('#lightbox').length > 0) { // #lightbox exists

  			$('#content').html('<img src="' + image_href + '" />');

  			//$('#lightbox').show();
  			
  			$('#lightbox').fadeIn('2000');
  		}

  		else {

  			var lightbox =
  			'<div id="lightbox">' +
  				'<p>Click to close</p>' +
  				'<div id="content">' +
  					'<img src="' + image_href +'" />' +
  				'</div>' +	
  			'</div>';

  			$('body').append(lightbox);
  		}

  	});

  	$('#lightbox').live('click', function() {
  		$('#lightbox').hide();
  	});

  });
  </script>
</body>

</html>


Hey ttmt,

Did you ever get an answer to the above question? It is exactly the same problem I have! I have a jquery horizontal scrolling gallery with large main images that need to scale down proportionally with the size of the window.

Any help would be wildly appreciated.

Nick

I think I did it with


max-width:100%;
max-height:100%;