HTML/CSS 如何实现多张图片自适应缩放排列在同一行拼接流程图

核心思路是利用flex布局的比例分配能力，结合响应式宽度设置，保证切片严格按照原始比例拼接、随窗口等比缩放，不会出现变形或缝隙。

1. 编写HTML结构 #

把4行切片分别放在独立的行容器中，外层套一个总容器控制整体尺寸：

<!-- 流程图总容器 -->
<div class="flowchart-box">
  <!-- 第1行切片，根据实际切片数量增删img标签 -->
  <div class="flow-row">
    <img src="slice-row1-1.png" alt="流程图切片">
    <img src="slice-row1-2.png" alt="流程图切片">
    <img src="slice-row1-3.png" alt="流程图切片">
    <img src="slice-row1-4.png" alt="流程图切片">
  </div>
  <!-- 第2行切片 -->
  <div class="flow-row">
    <img src="slice-row2-1.png" alt="流程图切片">
    <img src="slice-row2-2.png" alt="流程图切片">
    <img src="slice-row2-3.png" alt="流程图切片">
    <img src="slice-row2-4.png" alt="流程图切片">
    <img src="slice-row2-5.png" alt="流程图切片">
  </div>
  <!-- 第3、第4行结构同上，放入对应切片即可 -->
  <div class="flow-row">
    <!-- 第三行切片 -->
  </div>
  <div class="flow-row">
    <!-- 第四行切片 -->
  </div>
</div>

注意替换src属性为你自己的切片图片路径。

2. 编写CSS样式 #

/* 总容器：max-width替换为你的流程图原始总宽度，比如原始图总宽1400px就填1400px */
.flowchart-box {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto; /* 可选：让流程图在页面居中 */
}

/* 行容器：用flex保证一行内的切片不换行、按比例分配宽度 */
.flow-row {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
}

/* 切片样式：清除默认边距、保证按原始比例缩放 */
.flow-row img {
  display: block;
  flex-shrink: 1;
  flex-grow: 0;
  width: auto;
  height: auto;
  border: none;
  margin: 0;
  padding: 0;
}

注意事项 #

• Photoshop导出切片时要保证相邻切片没有重叠、没有多余透明边距，否则拼接会出现细缝
• 如果出现非常细微的拼接缝隙，可以给.flow-row img加margin-left: -1px临时修复
• 这个方案会让流程图在小于原始尺寸的屏幕上等比缩小，超过原始尺寸的屏幕上保持原图大小不放大，避免模糊

内容的提问来源于stack exchange，提问作者vepam24561