时间戳

首页 > 解决方案 > HTML/CSS - 如何将多个图像自动调整/缩放到 1 行

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

问题描述

我将在 Photoshop 中绘制的流程图切割成各种“部分”，我想将它们“重新组合”到网页上。所有“部分”都具有相同的高度但不同的宽度。要完全重组流程图，我需要 4 行，每行有 4 到 5 个图像。我希望“流程图”自动随窗口大小缩放。

我将如何在 HTML/CSS 中执行此操作？

标签： htmlcss

解决方案

用这个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;}

推荐阅读