图片需通过CSS流式控制（max-width:100%;height:auto）并配合overflow-auto、scroll-snap等特性实现自适应填充与精准滚动，同时注意scrollWidth/clientWidth差值及异步加载时机。
图片在滚动区域里既不能被拉伸变形，又得填满可用空间、随容器缩放——关键不是单独调 img 的宽高，而是控制它和父容器的尺寸关系与溢出行为。
滚动容器必须设 overflow-x: auto 或 overflow-y: auto
没有这个声明，scrollLeft 和 scrollTop 就没意义，浏览器也不会生成滚动条。但只加 overflow 不够：
-
overflow: scroll会强制显示滚动条（即使内容没溢出），干扰视觉 -
overflow: hidden虽然能裁剪，但用户完全无法手动滚动，失去交互性 - 推荐用
overflow-x: auto（横向）或overflow-y: auto（纵向），让滚动条按需出现
img 宽高要脱离固定像素约束
写死 width="300" 或 style="width: 200px" 会让图片在小屏上撑破容器、在大屏上留白。正确做法是交由 CSS 流式控制：
- 删掉所有
width/heightHTML 属性（它们会覆盖 CSS） - CSS 中设
img { max-width: 100%; height: auto; }—— 这保证图片不超容器宽度，且等比缩放 - 如果容器本身有
flex或grid布局，还要确认img的flex-shrink: 0，否则可能被压缩变形
滚动吸附（scroll-snap）需要显式对齐配置
想让每次滚动都停在一张图的边缘，光靠 overflow 不行，必须启用滚动吸附：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
scroll-snap-type: x mandatory（横向）或y mandatory（纵向） - 每张
img加scroll-snap-align: start（对齐左/上边缘） - 注意：若图片是
display: inline-block或有空格间隙，会导致吸附不准，建议用display: block+margin: 0清除干扰
JavaScript 控制滚动时别忽略 scrollWidth 和 clientWidth 的差值
用 container.scrollLeft += 2 实现自动滚动时，容易卡在末尾不动，因为没判断是否已到尽头：
- 正确判断条件是：
container.scrollLeft >= container.scrollWidth - container.clientWidth -
scrollWidth是全部内容的总宽度（含溢出），clientWidth是可视区域宽度，差值才是可滚动的净距离 - 别用
offsetWidth或innerWidth替代，它们不含 padding 或不反映实际渲染尺寸
最易被忽略的是：当图片加载异步完成时，scrollWidth 可能还没更新，导致初始滚动计算偏小；建议监听 img.onload 后再初始化滚动逻辑，或用 ResizeObserver 监控容器尺寸变化。
