molendijk

EDIT: see this for an alternative (better?) method..
CLICK HERE IF YOU WANT TO GO STRAIGHT AWAY TO THE DEMO PAGE.
The translate() method used inside the HTML-code below moves both a (super) div-containing-a-close-buttom (id: 'the_div') and an image (id: 'the_img') to the center of the window. The jquery-onload in the image ensures that the width of the div equals the width of the image. This is a requirement if we want to get the button (in the div) at the right position in front of the image (using float: right and a high zindex for the div).
The width of the image is not explicitly given, because we already have a height for it (here: 80%; fluid images require percentages) and we don't want a distorted image. The jquery-onload is capable of calculating the proper width of the div on the basis of a value for the image's width that jquery derives from the image's height. That's jquery-magic. Note that we (must) have identical values for position, size and translate for the image and the div.
Code (we must either have 'position: absolute' or 'position: fixed'; the z-index for the div must be higher than the z-index for the image):

Code:

<div id="the_div" style="position: fixed; z-index: 101; border: 1px solid black; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); ">
<div style="background: black; color: white; font-family: verdana; font-size: 14px; font-weight: bold; float: right; cursor: pointer;" onclick="alert('Inactive close button')">&nbsp;X&nbsp;</div>
</div>
<img id="the_img" alt="" src="http://press.princeton.edu/images/k8264.gif" style="position: fixed; z-index: 100; border: 1px solid black; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%);" onload='$("#the_div").css("width", $("#the_img").width()+"px");'>

It's possible to turn this static code into one long HTML-line that creates the div (containing the close button) plus the image 'on the fly'. I added some jquery fade:

Code:

<a href="javascript: void(0)" onmouseover="if(!$('#the_div').next().length>0 ){$('body').append('<div id=\'the_div\'></div><img id=\'the_img\'>')};" onclick="$('#the_div').css('display', 'block'); $('#the_div').html('<div id=\'the_div_inner\' style=\'z-index: 101; position: fixed; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black; display: none\'><div style=\'color: white; background: black; font-family: verdana; font-size: 14px; font-weight: bold; float: right; cursor: pointer\' onclick=\'$(&quot;#the_div&quot;).fadeOut(500); setTimeout(function() {$(&quot;#the_div&quot;).empty()}, 500);\'>&nbsp;X&nbsp;</div></div><img id=\'the_img\' src=\'http:\/\/press.princeton.edu\/images\/k8264.gif\' alt=\'\' style=\'display: none; z-index: 100; position: fixed; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black\' onload=\'$(&quot;#the_div_inner&quot;).css(&quot;width&quot;, $(&quot;#the_img&quot;).width()+&quot;px&quot;); $(&quot;#the_div_inner&quot;).fadeIn(500); $(&quot;#the_img&quot;).fadeIn(500); \'>'); return false">show fluid centered image</a>

But we'd better use a function that does the same thing:

Code:

<script>
function create_fluid_img(which_image, which_height, which_position_type)
{
if(!$('#the_div').next().length>0 )
{$('body').append("<div id='the_div'></div><img id='the_img'>")};

$('#the_div').css('display', 'block') ;

$('#the_div').html("<div id='the_div_inner' style='z-index: 101; position:"+which_position_type+"; left: 50%; top: 50%; height:"+which_height+"%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black; display: none'><div style='color: white; background: black; font-family: verdana; font-size: 14px; font-weight: bold; float: right; cursor: pointer' onclick='$(\"#the_div\").fadeOut(500); setTimeout(function() {$(\"#the_div\").empty()}, 500);'>&nbsp;X&nbsp;</div></div><img id='the_img' src='"+which_image+"' alt='' style='display: none; z-index: 100; position:"+which_position_type+"; left: 50%; top: 50%; height:"+which_height+"%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black' onload='$(\"#the_div_inner\").css(\"width\", $(\"#the_img\").width()+\"px\"); $(\"#the_div_inner\").fadeIn(500); $(\"#the_img\").fadeIn(500); '>");

}

//Usage:
//<a onclick="create_fluid_img('http://press.princeton.edu/images/k8264.gif', '70', 'absolute')">fluid centered image, absolute position, height 70%</a>
//<a onclick="create_fluid_img('http://press.princeton.edu/images/k8264.gif', '40', 'fixed')">fluid centered image, fixed position, height 40%</a>

</script>

Demos and explanations here.