HTML/CSS -如何将多个图像自动调整/缩放到一行

Question

我把用Photoshop绘制的流程图切成不同的“部分”，想要“重新组装”到一个网页上。所有的“部件”都有相同的高度但不同的宽度。为了完全重组流程图，我需要4行，每行都有4到5个图像。我想“流程图”自动缩放与窗口的大小。

我该如何在HTML/CSS中做到这一点？

Answer 1

使用此display:flex;flex-wrap:wrap;

<div class="images-row">
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
  <div><img src="" class="images"/></div>
</div>

 **style of CSS**
 .images-row{display:flex;flex-wrap:wrap;}
 .images-row div{width:17%;padding:5px;}
 .images{ width:100%; height:150px;background:#ccc;}

Answer 2

您可以使用responsive图像使其随窗口大小进行缩放：

width: 100%; max-width: 400px; height: auto;