Swiper图片高度不一致求助：如何统一幻灯片图片高度？

问题：使用Swiper时，由于图片尺寸不一，无法让所有幻灯片保持统一高度，推测是CSS配置问题。

问题截图：

当前JSX代码：

<Swiper
  slidesPerView={1}
  spaceBetween={10}
  navigation={{
    prevEl: ".swiper-previous-button",
    clickable: true,
    nextEl: ".swiper-next-button",
  }}
  breakpoints={{
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 4,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 5,
      spaceBetween: 50,
    },
  }}
  modules={[Navigation]}
  className="mySwiper"
>
  {latestMovies?.map((movie) => (
    <SwiperSlide key={movie.Id}>
      <img
        key={movie.Id}
        src={
          movie?.ImageTags.Primary
            ? `http://localhost:8096/Items/${movie.Id}/Images/Primary`
            : `http://localhost:8096/Items/${movie.Id}/Images/Backdrop`
        }
        alt={movie.Name}
      />
    </SwiperSlide>
  ))}
</Swiper>

当前CSS代码：

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

问题根源 #

现有CSS中，.swiper的height: 100%依赖父元素高度继承，若父元素未设置明确高度，Swiper容器会自适应内容高度；同时.swiper-slide没有强制高度约束，导致图片根据自身尺寸撑开，出现高度不一致。

解决方案 #

方案1：固定高度（适合固定尺寸场景）

给自定义Swiper容器类.mySwiper设置明确高度，同时让.swiper-slide填满容器：

.mySwiper {
  width: 100%;
  /* 根据需求设置固定高度，示例为300px */
  height: 300px;
}

.swiper-slide {
  height: 100%; /* 强制幻灯片填满容器高度 */
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  border-radius: 15px;
}

方案2：响应式宽高比（适配多屏幕）

如果需要不同屏幕下保持固定宽高比（如16:9），可以用padding-top实现比例约束：

.mySwiper {
  width: 100%;
  position: relative;
}

/* 16:9比例，计算方式：9/16*100% = 56.25% */
.mySwiper::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.mySwiper .swiper-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height: 100%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

额外提示 #

• 若不想裁剪图片，可将object-fit: cover改为object-fit: contain，但会出现留白，按需选择
• 确保Swiper的父元素没有设置height: auto以外的约束，避免影响高度继承

内容的提问来源于stack exchange，提问作者hj.paul7