使用固定宽度容器配合子元素居中布局，可确保轮播图每次仅显示一张完整图像，无论用户上传的是横图还是竖图，避免图像拉伸或相邻图片透出。
使用固定宽度容器配合子元素居中布局，可确保轮播图每次仅显示一张完整图像，无论用户上传的是横图还是竖图，避免图像拉伸或相邻图片透出。
要实现「每次仅显示一张图像且严格居中」的响应式轮播图，关键在于解耦滚动容器的视觉节奏与图像自身的尺寸变化。直接对 应用 scroll-snap-align: center 并依赖其原始宽高，会导致竖图（height > width）在 height: 100% 下宽度不足，从而暴露相邻项——这正是问题根源。
✅ 推荐方案：容器驱动滚动，内容独立居中
<div class="carousel" style="scroll-snap-type: x mandatory; overflow-x: scroll; display: flex;">
<div class="carousel-item" style="flex: 0 0 100%; scroll-snap-align: center;">
<img src="tall-image.jpg" alt="竖图" style="max-width:90%">
</div>
<div class="carousel-item" style="flex: 0 0 100%; scroll-snap-align: center;">
<img src="wide-image.jpg" alt="横图" style="max-width:90%">
</div>
</div>
- ✅ .carousel-item 设为 flex: 0 0 100%，强制每个卡片占据容器全宽，确保滚动停靠点严格对齐；
- ✅ 图像设置 height: 100% + width: auto 保持原始宽高比，margin: 0 auto 水平居中（需 display: block 避免底部空白）；
- ✅ 所有 .carousel-item 高度统一为 100%，与容器高度一致，消除因图像高度差异导致的布局错位。
⚠️ 注意事项：
- 确保 .carousel 设置 height（如 height: 400px）或由父容器约束高度，否则 height: 100% 在图像上无效；
- 若需支持触摸拖拽/惯性滚动，建议添加 scroll-behavior: smooth 和 -webkit-overflow-scrolling: touch（iOS）；
- 不要尝试用 CSS 计算 img 的动态宽度（如 calc(100% - width)），CSS 无法读取元素运行时渲染宽高，该表达式非法且不可用。
此方案无需 JavaScript、不依赖图像预加载，纯 CSS 实现健壮、可访问、高性能的单图轮播体验。
