How to create a Gallery which images get bigger in the middle-CodePudding

I want to create a gallery which the images get bigger in the middle. The ammont of images are random.

With this code, I could find the middle, but I dont know how to change the size of the Images ascendens and/or descendant.

var boxes = document.querySelectorAll(".box");
var middle = boxes[Math.round((boxes.length - 1) / 2)];
middle.style.width = "70px"
middle.style.height= "70px"

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
.box{
  width:50px;
  height:50px;
  background-color:black;
  margin:10px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

something like this.. you can play with the number, depending on how much bigger or smaller you want them..

var boxes = document.querySelectorAll(".box");
var middle_index = Math.round((boxes.length - 1) / 2);
for ( var i=0; i<boxes.length; i  ) {
boxes[i].style.width =  `${70-Math.abs(boxes.length-i*2-1)*5}px`;
boxes[i].style.height = `${70-Math.abs(boxes.length-i*2-1)*5}px`;
}

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
.box{
  width:50px;
  height:50px;
  background-color:black;
  margin:10px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Same as the other answer except the size calculation is moved to CSS

const boxes = document.querySelectorAll(".box");
let middle = Math.floor((boxes.length - 1) / 2);

boxes.forEach((e, i) => {
    e.style.setProperty('--s',  1 - (Math.abs(i - middle) / boxes.length));
});

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

.box {
  width: calc(70px * var(--s));
  height: calc(70px * var(--s));
  background-color:black;
  margin: 10px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>