直接用 width: 100% + height: auto 必然失败，因图片宽高比不一致且父容器缺稳定尺寸基准；必须用 aspect-ratio 锁定外层容器宽高比，并配 width: max-content、min-width: 100% 和 flex-shrink: 0 确保轮播精准位移。
直接用 width: 100% + height: auto 必然失败——轮播容器会塌陷、滑动错位、首帧跳动。核心矛盾在于：图片宽高比不一致，而父容器缺乏稳定尺寸基准。
必须先锁定容器宽高比，再布局子项
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）请无条件用 aspect-ratio：
-
aspect-ratio: 16 / 9写在轮播最外层容器（如.carousel），语义清晰且不依赖伪元素 - 禁用老式
padding-bottom: 56.25%+position: absolute，它和display: flex容易冲突，且无法响应内容变化 - 若需兼容 Safari 15.3 及更早版本，才降级为
padding-bottom方案，并把子项设为position: absolute; top: 0; left: 0; width: 100%; height: 100%
flex 轮播轨道必须设 width: max-content
这是 translateX 位移能对齐的关键前提，否则 flex 会按视口宽度计算每张图占位，导致位移像素失准：
.carousel-track { display: flex; width: max-content; }- 每张图（
.carousel-slide）必须设min-width: 100%+flex-shrink: 0，防止小屏下被压缩变形 - 别用
flex: 1或flex: 0 1 100%——前者拉伸，后者允许收缩，都不满足“一图占满一屏”的轮播语义
图片自身尺寸控制不能只靠 w-100
Bootstrap 的 w-100 只管宽度，高度完全失控。真实项目中常见竖构图图片顶出容器、遮挡按钮、触发页面滚动：
- 删掉
w-100，改用显式声明：width: 100%; height: 100%; object-fit: cover; - 若需保留原始比例不裁剪，用
object-fit: contain，但必须配background-color防留白 - 绝对禁止同时写
height: 100%和max-height: 400px——浏览器会忽略后者 - 慎用
background-image替代data-bs-interval失效、懒加载失效、alt 文本丢失、SEO 损失
transform 动画必须用 translateX，别碰 left
left 触发重排（reflow），尤其在图片未加载完或容器宽度浮动时，动画掉帧严重，iOS Safari 表现最差：
-
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);是目前最稳的组合 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)收尾更自然，避免“甩尾感” - 确保
.carousel-track启用 GPU 加速：transform: translateZ(0)或will-change: transform（仅必要时加）
最容易被忽略的是：轮播容器的 aspect-ratio 和子图的 min-width: 100% 必须成对出现。漏掉任意一个，flex 就算不准位移基准，哪怕动画写得再漂亮，滑动也会偏移半张图。这不是 bug，是 CSS 布局模型的必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
