Javascript函數未給出圖像的預期結果

Question

此代碼在運行時應調整圖像適合容器的高度和寬度。

這是從代碼的輸出（來自警報）：

2488：圖像自然高度

3264：圖像自然寬度

450：容器高度

1063：該集裝箱寬度

612：新高度

844：新的寬度

4：

新寬度：544

的時候，它被劃分去輸出

**應該把它的6倍，提供的結果數

新的高度：414 **

我幾乎可以肯定，這個問題是在Java腳本：

function resize(iid, eid) { 
 
//Get the ID of the elements (ele being the container that the image is in and img being the image its self) 
 
    var img = document.getElementById('img'); 
 
    var ele = document.getElementById('contaner'); 
 
//makes the var needed 
 
    var currentwidth = ele.clientWidth; 
 
    var currentheight = ele.clientHeight; 
 
    var naturalheight = img.naturalHeight; 
 
    var naturalwidth = img.naturalWidth; 
 
    var newheight = naturalheight; 
 
    var newwidth = naturalwidth; 
 
    var x = 0; 
 
    //runs a loop that should size the image 
 
     while (newheight > currentheight && newwidth > currentwidth){ 
 
      x = x + 1; 
 
      newheight = naturalheight/x; 
 
      newwidth = naturalwidth/x; 
 
     } 
 
    newheight = Math.ceil(newheight); 
 
    newwidth = Math.ceil(newwidth); 
 
    //alerts out the answers 
 
    alert(naturalheight); 
 
    alert(naturalwidth); 
 
    alert(currentheight); 
 
    alert(currentwidth); 
 
    alert(newheight); 
 
    alert(newwidth); 
 
    alert(x); 
 
}

#contaner { 
 
    height: 450px; 
 
    width: 90%; 
 
    margin: 5% auto; 
 
    position: relative; 
 
} 
 

 
#img { 
 
    height: 450px; 
 
    width: 90%; 
 
}

<div id="contaner"> 
 
       <img src = "..\..\Resorces\Images\SlideShow\img1.jpg" style="width:652px;height:489px;" id="img"/> 
 
       <div id="left_holder"><img onClick="slide(-1)" src="..\..\Resorces\Images\arrow_left.png" class="left"/></div> 
 
       <div id="right_holder"><img onClick="slide(+1)" src="..\..\Resorces\Images\arrow_right.png" class="right"/></div> 
 
      </div>

Answer 1

的問題是這一行：

while (newheight > currentheight && newwidth > currentwidth) 

它停止儘快要麼容器，在那裏，因爲它似乎像你想都內寬度或高度配合適合容器的邊界。更改爲||，您將獲得六次迭代：

while (newheight > currentheight || newwidth > currentwidth)