直接用 width: 100% 会导致轮播容器塌陷，是因为图片宽高比不一致且父容器无稳定尺寸基准，flex 无法准确计算每项宽度，transform 位移失准；必须先用 aspect-ratio 锁定容器宽高比，并配对 width: max-content 和 min-width: 100% + flex-shrink: 0 确保尺寸稳定。
为什么直接用 width: 100% 会导致轮播容器塌陷
轮播图不是简单把图片塞进盒子就行。很多开发者一上来就给 <img> 设 width: 100%; height: auto，结果发现容器高度忽高忽低、滑动卡顿、甚至第一张图“跳一下”。根本原因是：图片原始宽高比不一致，父容器没有稳定尺寸基准，flex 布局算不出每张图该占多少像素，transform 位移就失准。
- 必须先锁定轮播最外层容器的宽高比，推荐用
aspect-ratio: 16 / 9（现代浏览器支持），语义清晰且无需伪元素 hack - 避免用老式
padding-bottom: 56.25%+position: absolute，它和flex容易冲突，维护成本高 - 如果要兼容 Safari 15.6 及更早版本，才考虑降级方案：用
padding-bottom配合position: relative和绝对定位子项
transform: translateX() 比 left 更稳的原因
对 left 做 transition 会触发重排（reflow），尤其在图片未加载完或容器宽度浮动时，动画掉帧、首帧延迟、移动端 Safari 表现极差。而 transform 自动启用合成层，走 GPU 加速，位移计算独立于布局流。
- 轮播轨道（
.carousel-track）必须设display: flex+width: max-content，否则translateX缺少位移基准 - 每张图（
.carousel-slide）必须设min-width: 100%+flex-shrink: 0，防止小屏下被压缩变形 - 过渡曲线建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认ease收尾更自然，减少“甩尾感” - 移动端需加
-webkit-transform前缀（iOS 12–14 仍部分需要）
object-fit: cover 的裁剪风险怎么控
object-fit: cover 确实防拉伸，但它默认居中裁剪。在窄屏上，人物脸部、标题文字常被切掉顶部或底部——这不是 bug，是设计行为。
- 用
object-position: top center可优先保全上方内容，适合图文轮播中标题在上的场景 - 对关键图可单独设
object-position: 20% 50%微调裁剪锚点，而不是全局统一 - 慎用
object-fit: contain：留白难控制，容器高度仍可能浮动，违背“锁定宽高比”的前提 - 若图片内容关键区域偏上/偏下，建议提前在图像编辑阶段预留安全边距，而非全靠 CSS 补救
响应式断点该监听谁的宽度
轮播图常嵌在栅格系统里（比如 md:w-1/2 或 col-md-8），它的实际宽度由父容器决定，不是屏幕宽度。用 @media (max-width: 768px) 是错的——它查的是 window.innerWidth，不是轮播容器本身。
- 现代方案优先用
@container查询（Chrome 105+ / Safari 16.4+ 支持），例如@container (max-width: 480px) - 若需兼容旧浏览器，可在轮播组件内部写媒体查询，并基于其自身
max-width断点，如@media (max-width: 480px) { .carousel { aspect-ratio: 4 / 3; } } - 别在轮播外部用视口断点强行改
font-size或padding，这容易破坏内部transform位移精度
aspect-ratio 和 width: max-content 没配对，后面所有动画、响应、裁剪都会漂移。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
