如何让不同尺寸的Carousel轮播项始终居中显示？

问题描述 #

使用纯HTML、CSS和JavaScript实现图片轮播组件，循环展示图片时，部分宽高比不同的图片导致轮播项的变换效果与其他项不一致。尝试过使用百分比和vw/vh单位设置平移值，但问题仍未解决，需要让绝对定位的轮播项始终保持居中。

解决方案 #

核心思路是统一轮播项容器尺寸，并让所有变换基于父容器的中心点进行，避免因图片自身宽高比差异导致的偏移不一致。

步骤1：统一轮播项容器与图片适配 #

移除自定义的项宽高，为所有轮播项设置统一尺寸，内部图片通过object-fit自适应容器，保持比例同时填充容器：

/* 移除#item_6的自定义宽高 */
/* #item_6 {
  height: 200px;
  width: 550px;
} */

.carousel_items .carousel_item {
  position: absolute;
  top: 50%; /* 改为50%，基于父容器垂直居中 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw; /* 固定宽度 */
  height: 35vh; /* 固定高度 */
  object-fit: contain;
  overflow: hidden;
  transition: all 300ms ease-in-out;
  z-index: -1;
  opacity: 0;
  clip-path: polygon(
    var(--corner-offset) 0%,
    100% 0,
    100% calc(100% - var(--corner-offset)),
    calc(100% - var(--corner-offset)) 100%,
    0 100%,
    0% calc(0% + var(--corner-offset))
  );
  isolation: isolate;
  display: inline-block;
  background-color: grey;
  line-height: 0;
}

.carousel_item .img {
  background-color: grey;
  width: 100%; /* 铺满容器宽度 */
  height: 100%; /* 铺满容器高度 */
  object-fit: contain; /* 图片自适应容器，保持宽高比 */
}

步骤2：修正状态类的变换逻辑 #

将所有状态类的transform调整为基于父容器中心点的偏移，结合初始的translate(-50%, -50%)和额外偏移、缩放：

.carousel_item.active {
  opacity: 1;
  z-index: 99;
  box-shadow: 0px 0px 105px -35px rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%) scale(1); /* 明确基于中心点缩放 */
}

.carousel_item.prev {
  z-index: 98;
  opacity: 0.9;
  transform: translate(-50% - 19vw, -50% - 8vh) scale(0.8);
}

.carousel_item.next {
  z-index: 98;
  opacity: 0.9;
  transform: translate(-50% + 2vw, -50% - 8vh) scale(0.8);
}

.carousel_item.next.one {
  z-index: 97;
  opacity: 0.8;
  transform: translate(-50% + 8vw, -50% - 13vh) scale(0.75);
}

.carousel_item.prev.one {
  z-index: 97;
  opacity: 0.8;
  transform: translate(-50% - 23vw, -50% - 13vh) scale(0.75);
}

.carousel_item.next.two {
  z-index: 96;
  opacity: 0.7;
  transform: translate(-50% + 10vw, -50% - 23vh) scale(0.65);
}

.carousel_item.prev.two {
  z-index: 96;
  opacity: 0.7;
  transform: translate(-50% - 23vw, -50% - 23vh) scale(0.65);
}

.carousel_item.next.three {
  z-index: 95;
  opacity: 0.6;
  transform: translate(-50% + 4vw, -50% - 35vh) scale(0.55);
}

.carousel_item.prev.three {
  z-index: 95;
  opacity: 0.6;
  transform: translate(-50% - 18vw, -50% - 35vh) scale(0.55);
}

.carousel_item.next.four {
  z-index: 94;
  opacity: 0.5;
  transform: translate(-50% - 6vw, -50% - 38vh) scale(0.45);
}

步骤3：修复JS中的索引边界问题 #

原代码中prev1、prev2等变量未处理边界情况，会出现负数索引，导致错误，修正如下：

function carousel() {
    const slider = document.querySelector(".carousel_items");
    const slides = document.querySelectorAll(".carousel_item");
    const button = document.querySelectorAll(".button");

    let current = 0;
    let prev = current > 0 ? current - 1 : slides.length - 1;
    let prev1 = prev > 0 ? prev - 1 : slides.length - 1; // 修复边界判断
    let prev2 = prev1 > 0 ? prev1 - 1 : slides.length - 1;
    let prev3 = prev2 > 0 ? prev2 - 1 : slides.length - 1;
    let next = current < slides.length - 1 ? current + 1 : 0;
    let next1 = next < slides.length - 1 ? next + 1 : 0;
    let next2 = next1 < slides.length - 1 ? next1 + 1 : 0;
    let next3 = next2 < slides.length - 1 ? next2 + 1 : 0;
    let next4 = next3 < slides.length - 1 ? next3 + 1 : 0;

    const update = () => {
        slides.forEach(it => {
            it.classList.remove("active");
            it.classList.remove("prev", "one");
            it.classList.remove("prev", "two");
            it.classList.remove("prev", "three");
            it.classList.remove("prev");
            it.classList.remove("next");
            it.classList.remove("next", "one");
            it.classList.remove("next", "two");
            it.classList.remove("next", "three");
            it.classList.remove("next", "four");
        });

        slides[current].classList.add("active");
        slides[prev1].classList.add("prev", "one");
        slides[prev2].classList.add("prev", "two");
        slides[prev3].classList.add("prev", "three");
        slides[prev].classList.add("prev");
        slides[next].classList.add("next");
        slides[next1].classList.add("next", "one");
        slides[next2].classList.add("next", "two");
        slides[next3].classList.add("next", "three");
        slides[next4].classList.add("next", "four");
    }

    // 移除无效的moveLeft/moveRight逻辑（原代码中未定义left类）
    for (let i = 0; i < button.length; i++) {
        button[i].addEventListener("click", () => i == 0 ? gotoPrev() : gotoNext());
    };

    const gotoPrev = () => current > 0 ? gotoNum(current - 1) : gotoNum(slides.length - 1);
    const gotoNext = () => current < slides.length - 1 ? gotoNum(current + 1) : gotoNum(0);

    const gotoNum = number => {
        current = number;
        prev = current > 0 ? current - 1 : slides.length - 1;
        prev1 = prev > 0 ? prev - 1 : slides.length - 1;
        prev2 = prev1 > 0 ? prev1 - 1 : slides.length - 1;
        prev3 = prev2 > 0 ? prev2 - 1 : slides.length - 1;
        next = current < slides.length - 1 ? current + 1 : 0;
        next1 = next < slides.length - 1 ? next + 1 : 0;
        next2 = next1 < slides.length - 1 ? next1 + 1 : 0;
        next3 = next2 < slides.length - 1 ? next2 + 1 : 0;
        next4 = next3 < slides.length - 1 ? next3 + 1 : 0;

        update();
    }

    update();
}

carousel();

步骤4：调整按钮布局（可选） #

原按钮布局的left:47%可能导致偏移，改为基于父容器居中：

.carousel_items .button-container {
  position: absolute;
  top: 90%;
  left: 50%; /* 改为50% */
  transform: translateX(-50%); /* 水平居中 */
  width: 11vw;
  z-index: 100;
}

原理说明 #

• 统一轮播项容器尺寸后，所有项的变换基准一致，不会因自身宽高差异导致偏移错位；
• 基于父容器中心点的translate(-50%,-50%)确保初始居中，后续状态的偏移均在此基础上叠加，保证所有项的变换围绕同一中心点展开；
• object-fit: contain让不同宽高比的图片自适应容器，既保持比例又不会超出容器范围。

内容的提问来源于stack exchange，提问作者lzill