直接用 display: flex 或 display: grid 就能实现多图拼图式排版，无需 js 或 canvas；flex 适合图数不固定、自动换行场景，grid 适合固定列数或 minmax 响应式布局，二者均优于像素级 canvas 合成。
直接用 display: flex 或 display: grid 就能实现多图拼图式排版，不需要 JS 计算坐标或 Canvas 合成——后者是“像素级拼接成一张图”，前者才是“多图视觉拼图布局”。别混淆这两个概念。
flex 实现等宽自适应拼图布局
适合图数量不固定、希望窄屏自动换行、宽屏尽量铺满的场景。核心是容器设 display: flex + flex-wrap: wrap，子项设 flex: 1 和 max-width。
-
flex: 1让每张图平分可用宽度，比写死width: 33.333%更稳，会自动扣除gap占位 - 必须加
max-width: 100%，否则原始尺寸大的图会撑破容器；只设width可能拉伸小图 - 漏掉
min-width: 0是常见坑：Flex item 默认min-width: auto，遇到窄容器时拒绝缩小，导致横向滚动条或错行 - 图片本身加
height: auto保比例，若父容器有固定高（如height: 200px），则用object-fit: contain避免裁剪
grid 实现固定列数响应式拼图
适合明确要“始终 3 列”或“最小宽度 250px 才分列”的场景。用 auto-fit + minmax() 比媒体查询更简洁。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))是关键：每列至少 250px，空间够就均分，不够就合并为单列 -
gap控制间距，比给每个img加margin更安全，不影响轨道计算 - IE11 不支持 Grid，如需兼容，退化方案是
inline-block+font-size: 0清除 HTML 换行符间隙 - 图片只需
width: 100%+height: auto，不用 Flex 属性；想等高就加align-items: start
带图说（caption）时避免错行
<figcaption></figcaption> 是块级元素，直接和 <img> 并列会强制换行。必须把每组图+文包进一个容器，再统一控制排列方式。
- 结构必须是：
<figure><img><figcaption>文字</figcaption></figure>，不能是<img><figcaption></figcaption>平铺 - 对
<figure></figure>设display: inline-block或display: flex，再统一控制父容器的text-align或justify-content - 若用
inline-block，父容器要加font-size: 0消除 HTML 换行符产生的间隙，子元素里再设回正常字号 - 别忘了给
<figcaption></figcaption>加text-align: center或其他对齐样式，它默认左对齐且无 margin
Canvas 拼图 ≠ 布局拼图，别混用
如果目标是“导出一张合成图”，才需要 canvas.drawImage()；如果只是“网页上看着像拼图”，Canvas 是过度设计，还引入加载顺序、跨域、模糊导出等一堆麻烦。
-
drawImage()必须等所有img.onload完成才能调用，否则静默失败；推荐用Promise.all包裹加载逻辑 - 画布尺寸（
canvas.width/canvas.height）必须预先算好，靠 CSS 缩放会导致导出图模糊 - 跨域图片（CDN）必须设
img.crossOrigin = 'anonymous'，否则toDataURL()报SecurityError - 横向拼接要手动算
dx：第一张从0开始，第二张从img1.width + gap开始……没有自动布局逻辑
真正容易被忽略的是：图说文字的行高和容器高度是否匹配，以及小屏下是否折行为单列而非强行缩放——很多布局在桌面端好看，手机上文字挤成一团或图片被压扁，问题往往出在没设 min-width: 0 或漏了 object-fit。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
