在同一行中对齐图像，而不管窗口大小如何

Question

.pinkDiv {
  position: relative;
  width: 100%;
  height:290px;
  background-color: pink;
}

.miniDiv{
  width: calc(100%*100/893);
  background-color: green;
}

.maxiDiv {
    width: calc(100%*93/893);
    background-color: green;
}



img{
  width: 100%;
  height: auto;
  margin-top: 174px;
}

#queen {
  margin-top: 55px;
}

.tab2 {
  width: 100%;
  height: 5vh;
  background-color: rgb(208, 49, 45, 0.9);
}

<div class="pinkDiv">
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style=" width:100%;">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
      <div class ="maxiDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_piece_-_White_queen.jpg" style="width:100%" id = "queen">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
      <div class ="miniDiv">
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
      </div>
</div>

    <div class = "tab2">
    </div>

我连续放置约7个div，每个div的背景色均为绿色。当我调整窗口大小时，图像保留在同一行中而不会相互叠加（贷记：堆栈溢出），但存在垂直失真。我正在尝试使每个图像的底部与pinkDiv的末端对齐。

下面的屏幕快照显示了它如何与特定的窗口大小对齐。当我将其缩小时，图像会溢出粉红色的div。

https://i.stack.imgur.com/QKhEJ.png

Answer 1

不确定这是否是您想要的：

已添加

display: flex;
align-items: flex-end;

至pinkDiv

.pinkDiv {
  position: relative;
  width: 100%;
  height: 290px;
  background-color: pink;
  display: flex;
  align-items: flex-end;
}

.miniDiv {
  width: calc(100% * 100 / 893);
  background-color: green;
}

.maxiDiv {
  width: calc(100% * 93 / 893);
  background-color: green;
}

img {
  width: 100%;
  height: auto;
  margin-top: 174px;
}

#queen {
  margin-top: 55px;
}

.tab2 {
  width: 100%;
  height: 5vh;
  background-color: rgb(208, 49, 45, 0.9);
}

<div class="pinkDiv">
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style=" width:100%;">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="maxiDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_piece_-_White_queen.jpg" style="width:100%"
      id="queen">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
  <div class="miniDiv">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/StauntonPawn2.jpg" style="width:100%">
  </div>
</div>

<div class="tab2">
</div>