通过为轮播容器中的每个子项设置固定宽度（100%）、统一高度，并将图片在子容器内水平居中，可确保无论用户上传的图片是横版还是竖版，每次仅显示一张完整图像且精准居中。

通过为轮播容器中的每个子项设置固定宽度（100%）、统一高度，并将图片在子容器内水平居中，可确保无论用户上传的图片是横版还是竖版，每次仅显示一张完整图像且精准居中。

要解决用户上传图片尺寸不一导致轮播图显示异常（如竖图过窄、相邻图透出）的问题，关键在于解耦“滚动对齐”与“内容渲染”逻辑：不要直接对 <img> 应用 scroll-snap-align: center 并依赖其自身宽高参与滚动对齐计算，而应使用结构化布局隔离控制。

✅ 推荐方案：双层容器结构

• 外层轮播容器（.carousel）启用强制滚动对齐：

  .carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* 确保高度一致，避免因图片高度差异导致容器塌陷 */
    height: 400px; /* 或设为 min-height，配合子项 height: 100% */
  }

• 每个轮播项为 .carousel-item（<div>），宽度严格设为 100%，高度继承父容器：

  .carousel-item {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

• 图片置于 .carousel-item 内，设为响应式居中：

  .carousel-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* 关键：保持原始宽高比，不拉伸不变形 */
    margin: 0 auto; /* 水平居中（配合 flex 容器更稳妥） */
  }

? 为什么不用动态计算 margin？
CSS 中无法在运行时获取元素实际渲染宽度并用于 calc()（'width of the image' 属于运行时变量，纯 CSS 不支持）。试图用 100% - imageWidth 计算边距不仅不可行，还会因图片加载延迟、响应式重排等导致布局抖动。

⚠️ 注意事项：

• 必须为 .carousel-item 设置 flex: 0 0 100%（或 width: 100% + flex-shrink: 0），防止浏览器根据图片内容自动缩放宽度；
• object-fit: contain 是竖图/横图统一适配的核心——它让图片在不裁剪、不变形的前提下，完整居中填满可用空间；
• 若需支持 Safari 旧版本，请添加 -webkit-scroll-snap-type: x mandatory; 及对应前缀；
• 建议配合 scroll-padding-inline: 0 防止滚动后边缘留白。

此方案完全规避了对图片原始尺寸的依赖，兼顾语义清晰性、样式可维护性与跨浏览器稳定性，是现代 CSS 轮播实现的最佳实践。