在js中設置比例尺寸盒子後不斷增加寬度

Question

我試着設定每個盒子的高度與設定的寬度成正比。寬度以百分比表示，根據瀏覽器寬度的不同而不同。當盒子的寬度小於100％時它工作的很好。但是，一旦它們達到100％，當瀏覽器的寬度發生變化時，它們不會停止擴展。即使是容器「遊戲」也會擴大，並且設置一個固定的寬度並沒有幫助。我該如何解決？

window.onload = boxResize; 
 
window.onresize = boxResize; 
 
var i; //Variable for loop, not important. 
 
var box = document.getElementsByClassName("box"); 
 

 
//Sets the width of each box depending on the browser's width 
 
function boxResize(){ 
 
    if(window.innerWidth > 1400){ 
 
     boxResizeF(0.333); 
 
    } 
 
    else if(window.innerWidth <= 1400 && window.innerWidth > 980){ 
 
     boxResizeF(0.5); 
 
    } 
 
    else if(window.innerWidth <= 980){ 
 
     boxResizeF(1); //This is where problems start to occur! 
 
    } 
 
} 
 

 
//Resizes each box so that the height is proportional to its width. 
 
function boxResizeF(percentage){ 
 
    var gamesEl = document.getElementById("games"); //This is the container of the "box" element. 
 
    var gamesElWidth = gamesEl.offsetWidth; //Width of container 
 
    
 
    for(i = 0; i < box.length; i++){ 
 
     var boxWidth = gamesElWidth * percentage; //Set the width of each box in percent. 
 
     box[i].style.width = boxWidth + "px"; //Set width 
 
     var boxRatio = 9/16; 
 
     var boxHeight = boxWidth * boxRatio; 
 
     box[i].style.height = boxHeight + "px"; //Set height 
 
    } 
 
}

.box{ 
 
    display: table; float: left; box-sizing: border-box; 
 
    background: black; 
 
    border: 1px solid red; 
 
} 
 
#games{ 
 
    display: table; 
 
    width: 80%; height: auto; 
 
    margin: auto; 
 
     border: 1px solid blue; 
 
} 
 

 
@media screen and (max-width: 980px){ 
 
    #games{ 
 
     width:100%; 
 
    } 
 
}

<div id="games"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Answer 1

添加box-sizing: border-box;？

window.onload = boxResize; 
 
window.onresize = boxResize; 
 
var i; //Variable for loop, not important. 
 
var box = document.getElementsByClassName("box"); 
 

 
//Sets the width of each box depending on the browser's width 
 
function boxResize() { 
 
    if (window.innerWidth > 1400) { 
 
    boxResizeF(0.333); 
 
    } else if (window.innerWidth <= 1400 && window.innerWidth > 980) { 
 
    boxResizeF(0.5); 
 
    } else if (window.innerWidth <= 980) { 
 
    boxResizeF(1); //This is where problems start to occur! 
 
    } 
 
} 
 

 
//Resizes each box so that the height is proportional to its width. 
 
function boxResizeF(percentage) { 
 
    var gamesEl = document.getElementById("games"); //This is the container of the "box" element. 
 
    var gamesElWidth = gamesEl.offsetWidth; //Width of container 
 

 
    for (i = 0; i < box.length; i++) { 
 
    var boxWidth = gamesElWidth * percentage; //Set the width of each box in percent. 
 
    box[i].style.width = boxWidth + "px"; //Set width 
 
    var boxRatio = 9/16; 
 
    var boxHeight = boxWidth * boxRatio; 
 
    box[i].style.height = boxHeight + "px"; //Set height 
 
    } 
 
}

.box { 
 
    display: table; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    background: black; 
 
    border: 1px solid red; 
 
} 
 

 
#games { 
 
    display: table; 
 
    width: 80vw; 
 
    height: auto; 
 
    margin: auto; 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
} 
 

 
@media screen and (max-width: 980px) { 
 
    #games { 
 
    width: 100vw; 
 
    box-sizing: border-box; 
 
    } 
 
}

<div id="games"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>