响应式图片无缝拼接需主动消除间隙、统一尺寸基准、控制渲染行为：img设display: block或vertical-align: top消除4px白边；flex需gap: 0，grid需box-sizing: border-box+width: 100%+height: auto+aspect-ratio保障对齐。
响应式图片的无缝拼接不是靠“自动对齐”，而是靠主动消除间隙、统一尺寸基准、控制渲染行为——三者缺一不可。单纯写 display: flex 或 grid-template-columns 不会自动解决白边、错位、缩放模糊等问题。
为什么图片之间总有 4px 白边？
这是 <img> 默认 display: inline 的副作用：换行符和空格被当成文本节点，产生基线对齐缝隙。这不是 bug，是 HTML 渲染规范行为。
- 给所有参与拼接的
<img>加display: block（最直接）或vertical-align: top - 父容器设
font-size: 0也能干掉空白，但后续子元素需重设字体，维护成本高 - 避免在
<img>标签间写换行或空格，比如不要写成<img>\n<img>，而用<img><img>连写（可读性差，仅作备选） - 如果用
flex布局，必须配gap: 0；IE 不支持gap，得改用margin模拟，但要注意margin会参与 flex 计算，容易导致最后一项溢出
用 CSS Grid 实现响应式无缝网格的关键参数
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 是起点，但光有它远远不够。
- 必须配合
box-sizing: border-box，否则 padding/margin 会吃掉列宽余量，让minmax()失效 -
gap值要按设备分级：手机建议gap: 12px，平板16px，桌面24px；全屏统一写gap: 20px容易在小屏撑破容器 - 图片本身必须加
width: 100%和height: auto，否则原始尺寸会顶开网格项高度，破坏行对齐 - 宽高比不一致时，单靠
height: auto不够，得加aspect-ratio: 4/3（或对应比例），旧 Safari 可套一层<div>+overflow: hidden
Canvas 拼接适合什么场景？
Canvas 不是“更高级的拼接”，而是“需要像素级控制时的唯一选择”——比如导出合成图、做动态裁切、叠加滤镜、或生成可下载的完整画布。
立即学习“前端免费学习笔记（深入）”；
- 必须等所有图片加载完成再调用
ctx.drawImage()，否则出现空白；可用Promise.all(images.map(img => new Promise(r => img.onload = r)))控制时序 - 横向拼接两张图时，第二张的 x 坐标应为
img1.naturalWidth，不是img1.width（后者可能被 CSS 缩放过） - 缩放绘制时务必设
ctx.imageSmoothingEnabled = false，并加image-rendering: crisp-edges防止插值模糊 - Canvas 导出的
toDataURL()结果可作为<img src="data:image/png;base64,...">嵌入 Grid 或 Flex 布局中，但它不再是响应式源，不能用srcset
背景图拼接比 <img> 更稳的三个条件
当目标是“视觉上一张图”，比如 banner 分块切图、地图瓦片、长图分段加载，background-image 是更可控的路径。
- 每张小图对应一个
<div>，用background-position精确定位，不受 DOM 顺序和加载时序干扰 - 父容器设
position: relative，子元素用position: absolute+left/top定位，坐标单位建议用px，避免百分比误差累积 - 背景图路径错误不会报错，只会留白——必须查开发者工具 Network 面板是否有 404 请求，别只看元素面板里的样式
真正难的不是写出某一行 CSS，而是确认每张图导出时是否带半透明边缘、CMS 是否自动加了 padding、CDN 是否重写了宽高属性——这些细节一旦出错，“无缝”就变成“几乎无缝”。
