Non-stop increasing width after setting proportional sized boxes in js

Question

I tried setting each box' height to be proportional to the set width. The width is in percent, different depending on browser width. it works great when the box' width is less than 100%. Once they are 100% however, they wont stop expanding when the browser's width changes. Even the container "games" expands, and setting a fixed width doesn't help. How do I fix this?

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>

Dalin Huang · Answer 1 · 2017-06-17T19:38:32.770

0

Add 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>

edited Jun 17 '17 at 19:38

answered Jun 17 '17 at 19:31

Dalin Huang

11,212
5
32
49

@JonathanFogelström have you tried 100vw? viewport (1 = 1% for current window width) and also 100vh for viewport height, 1 = 1% current window height – Dalin Huang Jun 17 '17 at 19:36
This works really well, is there a way to make the width and height relative to the parent? – Jonathan Fogelström Jun 17 '17 at 19:46
@JonathanFogelström % are related to parent. REF: https://css-tricks.com/almanac/properties/w/width/ – Dalin Huang Jun 17 '17 at 19:53
In that case i could only set the width and height of the box to be proportional to the parent which isn't my intention. i want the box' height & width to use the 16:9 ratio – Jonathan Fogelström Jun 17 '17 at 20:08
@JonathanFogelström use like 16vw and 9vw? since vw or vh will caculated to px so use height as 9vw and width as 16vw (or 18/32 etc...) – Dalin Huang Jun 17 '17 at 20:12
I tried that when you mentioned vh & vw earlier but as you said it's only relative to the window and not the parent. – Jonathan Fogelström Jun 17 '17 at 20:20
1

@JonathanFogelström hm take a look at this? https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Dalin Huang Jun 17 '17 at 20:22
This solves all my issues, thanks for the help Daniel! – Jonathan Fogelström Jun 17 '17 at 20:34

Non-stop increasing width after setting proportional sized boxes in js

1 Answers1