如何创建一个图像在中间变大的画廊答案

【问题标题】：How to create a Gallery which images get bigger in the middle如何创建一个图像在中间变大的画廊
【发布时间】：2022-12-09 19:04:14
【问题描述】：

我想创建一个图片在中间变大的画廊。图片的数量是随机的。

有了这个code，我可以找到中间的，但我不知道如何更改Images ascendens 和/或后代的size。

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 class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【问题讨论】：

标签： javascript css

【解决方案1】：

像这样的东西..你可以玩这个数字，这取决于你想要它们的大小..

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)*5}px`;
boxes[i].style.height = `${70-Math.abs(boxes.length-i*2)*5}px`;
}

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

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：