.height（）.width（）不會調整大小的變化

Question

我有一個圖像調整到屏幕大小，但.height和.width()不調整，使我的margin-left和margin-top改變。有沒有辦法讓它調整？

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)); 

http://jsfiddle.net/a8a4Y/

Answer 1

的jquery resize event可能的幫助。

將您的代碼放入一個函數中，並在resize事件中調用該函數。

Answer 2

問題在於，當您使用圖像時，圖像未加載。所以高度，寬度將始終爲零。

http://jsfiddle.net/W8sNw/

所以你可以做的是增加一個處理程序load event，當被解僱，你可以執行代碼：

var $src = $(this).attr("href"); 
$('#overlay').append('<img class="image" src="' + $src + '" />'); 
var $image = $('img'); 
$image.on("load",function(){ // This is the new stuff, it listen to the load event 
          // which is fired when the image is loaded and the size 
          // size is known 

    var $height = $image.height(); 
    var $width = $image.width(); 
    $('.image').css('margin-top', (($height/2)*-1)); 
    $('.image').css('margin-left', (($width/2)*-1)); 
    console.log("Height: " + $height); 
    console.log("Width: " + $width); 
}) 

我還包括一個例子更優化的代碼。例如，每次使用選擇器時，JavaScript都會在DOM中搜索該元素。您應該只此一次，看看： http://jsfiddle.net/W8sNw/2/

Answer 3

試試這個：

var $src = $(this).attr("href"); 
    $('#overlay').append('<img class="image" src="' + $src + '" />'); 
    var $image = $('img') 
$image.ready(function(){ 

    $('.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)); 
});