Let me demonstrate the issue I'm facing with this demo.
This demo shows a simple list of images that scrolls across the page.
When you click on an image, a larger version appears above it in a lightbox style.
I want the height of this larger image to be 85% of the window height and adjust its width proportionally.
If the window is resized, I would like the image to scale proportionally accordingly.
In Safari, the large image appears at the correct height and scales proportionally when the height changes, but it doesn't scale correctly when the width is decreased less than 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 adjusted.
How can I ensure that the image displays at the correct height and scales proportionally across different 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>
</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>