按比例調整大小jquery

我遇到圖像大小調整的問題。這裏是代碼：按比例調整大小jquery

function resize() { 
var winHeight = $(window).height(); 
var winWidth = $(window).width(); 
var divHeight = winHeight * .9; 
var divWidth = winWidth * .7; 
var marginT = -1 * (divHeight/2); 
var marginL = -1 * (divWidth/2); 

if (winHeight > 300) { 
    $('#picture-box').height(divHeight); 
    $('#picture-box').css("margin-top", marginT); 
} 
if (winWidth > 300) { 
    $('#picture-box').width(divWidth); 
    $('#picture-box').css("margin-left", marginL); 
} 

var divPos = $('#picture-box').offset(); 
$('#close').css('top','50%'); 
$('#close').css('margin-top',marginT); 
$('#close').css('left',((divPos.left + divWidth) - 20)+'px'); 

var w = $('#main-image').width(); 
var h = $('#main-image').height(); 
var p = (divWidth-w<divHeight-h)?(divWidth/w):(divHeight/h); 
var nw = Math.round(w * p) * .9; 
var nh = Math.round(h * p) * .9; 
$('#main-image').width((nw>1)? nw : 1); 
$('#main-image').height((nw>1)? nh : 1); 
var imgMarginT = (divHeight - nh)/2; 
var imgMarginL = (divWidth - nw)/2; 
$('#main-image').css("margin-left", imgMarginL); 
$('#main-image').css("margin-top", imgMarginT); 
$('#close').css('position','fixed'); 
$('#close').css('z-index','101'); 

$('#tshirt-button').css('left',divPos.left); 

$('#memory-button').css('left',(divPos.left + divWidth) - 130); 

$('#left-arrow').css('left',divPos.left + 25); 
$('#right-arrow').css('left',(divPos.left + divWidth) - 75); } 

function triggerRightArrow() { 
if (quiltType == 'tshirt') { 
    tshirtIndex++; 
    if (tshirtIndex > MAX_TSHIRT_INDEX) 
    tshirtIndex = 1; 

    $('#picture-box').html('<img id = "main-image" src = "images/quilts/tshirt_'+tshirtIndex+'.jpg" />').then(resize(), resize()); 
} 
else { 
    memoryIndex++; 
    if (memoryIndex > MAX_MEMORY_INDEX) 
    memoryIndex = 1; 

    $('#picture-box').html('<img id = "main-image" src = "images/quilts/memory_'+memoryIndex+'.jpg" />').then(resize(), resize()); 
} } 

function triggerLeftArrow() { 
if (quiltType == 'tshirt') { 
    tshirtIndex--; 
    if (tshirtIndex < 1) 
    tshirtIndex = MAX_TSHIRT_INDEX; 

    $('#picture-box').html('<img id = "main-image" src = "images/quilts/tshirt_'+tshirtIndex+'.jpg" />').then(resize(), resize()); 
    //resize(); 
} 
else { 
    memoryIndex--; 
    if (memoryIndex < 1) 
    memoryIndex = MAX_MEMORY_INDEX; 

    $('#picture-box').html('<img id = "main-image" src = "images/quilts/memory_'+memoryIndex+'.jpg" />').then(resize(), resize()); 
    //resize(); 
} }

我的問題是，當triggerRightArrow函數被調用，圖片加載正常，但調整大小錯誤。當我再次調用triggerRightArrow，然後調用triggerLeftArrow時，圖像將被正確調整大小。這個解釋可能會讓人困惑，所以這裏是要演示的頁面http://creationsbyanna.x10.mx/quilts.html

如果有人能告訴我如何在第一次加載時讓圖片適當調整大小，我將不勝感激。

來源

2012-11-19 user1197028

林不知道這是否是問題$（ '＃主圖像'）的高度。（（NW> 1）NH：1）;我想它應該是（nh> 1）而不是（nw> 1）？ – bondythegreat

我試過了。仍然是相同的結果 – user1197028

好的我通過將頁面加載的緩存中的圖片加載進去了。我仍然不確定爲什麼這些圖片只在緩存中加載時才能正確調整大小，但這是迄今爲止我找到的唯一解決方案。這是我放在$（INIT）方法：

for (var i = 1; i <= MAX_TSHIRT_INDEX; i++) { 
    heavyImage = new Image(); 
    heavyImage.src = 'images/quilts/tshirt_' + i + '.jpg'; 
} 

for (var i = 1; i <= MAX_MEMORY_INDEX; i++) { 
    heavyImage = new Image(); 
    heavyImage.src = 'images/quilts/memory_' + i + '.jpg'; 
}

來源

2012-11-19 21:06:34 user1197028

按比例調整大小jquery

回答

相關問題