用display: flex实现多图横向无缝拼接，需设父容器display: flex和gap: 0，图片加vertical-align: top或display: block消除基线缝隙，并统一尺寸或用object-fit: cover；避免HTML换行空格，必要时改用background-image精确定位拼接。
用 display: flex 实现多图横向无缝拼接
图片之间有白边或间隙，不是代码写得“不严”，而是 HTML 默认把 <img> 当作行内元素处理，会保留换行符和空格产生的空白。最直接的解法是让容器用 flex 布局，并关闭图片的默认对齐行为。
- 给父容器加
display: flex和gap: 0（注意：IE 不支持gap，需用margin替代） - 给
<img>加vertical-align: top或display: block，消除基线对齐带来的底部缝隙 - 确保所有图片尺寸一致，否则
flex会按内容撑开，导致错位；建议统一设width和height，或用object-fit: cover - 避免在
<img>标签间写换行或空格——哪怕只是回车，也会被渲染为一个空白字符
用 background-image 拼接大图更可控
如果拼接目标是「视觉上一张图」（比如 banner 分段切图、地图瓦片、长图分块加载），硬塞多个 <img> 标签容易受 DOM 顺序、加载时序、宽高比干扰。这时候直接用 CSS 背景图拼接更稳。
- 把每张小图设为独立
<div>的background-image，配合background-position精确定位 - 用
background-repeat: no-repeat+background-size: auto避免缩放失真 - 所有子
<div>放进同一个父容器，设position: relative，子元素用position: absolute定位，坐标由left/top控制 - 注意：背景图路径错误时不会报错，只会留白——检查浏览器开发者工具里 Network 面板的 404 请求
用 picture + srcset 应对响应式拼接场景
当拼接图需要适配不同屏幕宽度（比如横屏手机展示三图并列、桌面展示六图），单纯靠 CSS 布局容易在窄屏下溢出或压缩变形。这时应优先考虑语义化响应方案。
-
<picture>本身不拼图，但可为同一逻辑区域提供多套拼接方案：窄屏用单张合成图，宽屏用多图 flex 拼接 - 关键不是写一堆
srcset，而是用<source media="(min-width: 768px)">切换整个拼接结构——比如媒体查询匹配时才渲染六个<img>，否则只渲染一张预合成图 - 避免在
srcset里混用不同拼接逻辑的图源，会导致浏览器预加载混乱；拼接方式变更必须走不同<source>分支 - 测试时禁用缓存，否则旧图可能被复用，掩盖新拼接逻辑失效的问题
常见错误：CSS border、outline 和父容器 overflow 干扰视觉无缝
即使图片本身紧贴，也可能因外围样式产生“假缝隙”。这类问题往往查不到 DOM 结构里，只能靠开发者工具逐层关掉样式排查。
立即学习“前端免费学习笔记（深入）”；
-
<img>默认无border，但某些重置样式表（如 normalize.css）会设border: 0—— 如果你手动加了border: 1px solid transparent，它依然占空间 - 父容器设了
padding或margin，看起来像图间有空隙，其实是容器自身留白 - 用
overflow: hidden裁剪拼接边缘时，若图片尺寸计算有 0.5px 误差，可能切掉 1 像素导致露底色 - 高 DPI 屏幕（如 MacBook Retina）下，
1px边框实际渲染为 2 物理像素，放大后更容易看出错位——建议用transform: scale(0.999)微调对齐（慎用，仅调试）
