纯CSS响应式图片无缝滚动需用固定图宽+CSS变量+媒体查询分段控制，因translateX(-100%)在响应式下因小数像素截断、视口突变等导致位移错位，产生白边或卡顿；必须显式设图片宽高或aspect-ratio防塌陷，并同步调整动画时长与位移值。
纯 CSS 就能实现响应式图片无缝滚动，但“响应式”和“无缝”在技术上是冲突点——前者依赖相对单位与弹性计算，后者要求像素级位移对齐。真正能落地的方案，是用固定图宽 + CSS 变量 + 媒体查询分段控制，而不是盲目套用 100% 或 vw。
为什么 translateX(-100%) 在响应式下必出空白
百分比位移值是相对于父容器计算的，而响应式容器宽度会随视口缩放、字体渲染、小数像素截断浮动。哪怕只差 0.3px，动画循环到终点时就会漏出一条白边或黑缝。实测中，width: 100vw 容器在 iOS Safari 下常因地址栏显示/隐藏导致宽度突变，直接让滚动卡顿一帧。
- 位移值必须等于原始图片总像素宽（含 margin/padding），例如三张
200px图，就写translateX(-600px) - 图宽不能靠
width: 20%; flex: 1这类弹性方式推算，否则总宽不可控 - 调试时临时取消
overflow: hidden，用 DevTools 检查.scroll-track实际宽度是否严格等于位移值
用 CSS 变量 + 媒体查询分段定义图宽和位移
不写死像素值，也不用 JS 动态计算，而是把不同断点下的图宽和总位移抽成变量，在 @keyframes 中引用。这样既保持 CSS 驱动的高性能，又支持响应式切换。
- 在
:root中定义：--img-width: 200px;，再用@media (max-width: 768px)覆盖为--img-width: 140px; -
.scroll-track设width: calc(var(--img-width) * 5);（5 张图） - 动画里写
transform: translateX(calc(var(--img-width) * -5));，CSS 引擎会实时计算 - 每张
<img alt="HTML中响应式图片无缝滚动的实现方式" >必须加width: var(--img-width); flex-shrink: 0;，禁用自动压缩
图片加载未完成时的高度塌陷问题
Flex 容器内图片没加载完，高度为 0，整个 .scroll-track 塌成一条线，动画失效甚至触发重排。这不是样式问题，是 DOM 渲染时序问题。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img alt="HTML中响应式图片无缝滚动的实现方式" >标签必须显式声明width和height属性（不是仅 CSS），让浏览器提前预留空间 - 更稳妥的做法是加
aspect-ratio: 4/3（按实际图比例），兼容现代浏览器；老浏览器 fallback 到固定height - 避免用
background-image替代<img alt="HTML中响应式图片无缝滚动的实现方式" >——它无法被屏幕阅读器识别，且alt文本丢失
最易被忽略的是：动画时长必须随图宽动态调整。图变小了，但还用 25s 跑 -600px，速度就变慢；图变大了却没延长时长，人眼会察觉拖拽感。位移值和时长得同步换算，不能只调一个。
