.height() .width() doesn't adjust to change in size

.height() .width() doesn't adjust to change in size

I have an image that adjusts to screen size but the .height and .width()
doesn't adjust, leaving my margin-left and margin-top from changing. Is
there a way to make it adjust?
var $src = $(this).attr("href");
$('#overlay').append('<img class="image" src="' + $src + '" />');
var $image = $('img');
$('.image').css('max-height','80%');
$('.image').css('max-width','90%');
$('.image').css('position', 'fixed');
$('.image').css('top', '50%');
$('.image').css('left', '50%');
var $height = $image.height();
var $width = $image.width();
$('.image').css('margin-top', (($height/2)*-1));
$('.image').css('margin-left', (($width/2)*-1));