How to change height of box together with its width?

Question

I want to publish on my page section with articles in rows if form of boxes. I use bootstrap grid system to make it responsive. I set width of boxes to be 100%. And I want height to be as the same as width. For this I wrote an javascript code to execute this task:

document.addEventListener("DOMContentLoaded", function(event) { 
    let width = document.querySelectorAll(".post-boxes .box");
    width.forEach(item =>{
    item.style.height = `${item.offsetWidth}px`
    });
  });

But the problem is it works only when DOM is loaded for the first time, and if screen size is change, height remain the same.

This is my photo of boxes:

IMG

I think you might be able to do it with CSS only, no script. It would be `aspect-ratio: 1;` See https://stackoverflow.com/a/66335230/2740650 — user2740650, Jan 01 '22 at 01:52

Usiel · Answer 1 · 2022-01-01T01:28:18.553

1

One solution is to run the function again when the screen is resized. You can use the resize event for this. Here is an example:

function box(){
    let width = document.querySelectorAll(".post-boxes .box");
    width.forEach(item =>{
    item.style.height = `${item.offsetWidth}px` })
}

document.addEventListener("DOMContentLoaded", () => box() );
window.addEventListener("resize", () => box() );

edited Jan 01 '22 at 01:28

answered Jan 01 '22 at 01:21

Usiel

671
3
14

score 1 · Answer 2 · answered Jan 01 '22 at 01:22

DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

If you want to recalculate the height then add event handler for onresize

window.addEventListener('resize', <your-handler>);

How to change height of box together with its width?

2 Answers2