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>