滑动图像高度不一样

Question

似乎无法弄清楚这一点，试图强制所有图像幻灯片具有统一的高度。但有些图像比其他图像更小/更大。我假设这是我无法弄清楚的 CSS 问题。有人帮忙吗？

代码：

 <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;
}

Answer 1

您需要设置.swiper-slide为height: auto

CSS

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

.swiper .swiper-slide {
  height: auto;
}

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

JS

import "./styles.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
export default function App() {
  return (
    <div className="App">
      <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"
      >
        <SwiperSlide>
          <img
            src="https://www.themoviedb.org/t/p/original/gPMh5rsVrDDAYMDbTcz6Up1DQ4z.jpg"
            alt=""
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            src="https://www.themoviedb.org/t/p/original/6zNROEm1IFpUy1SbCbxoQYFn46v.jpg"
            alt=""
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            src="https://www.themoviedb.org/t/p/original/bWWciblTuuKXDkSrTXRV5aseLZy.jpg"
            alt=""
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            src="https://www.themoviedb.org/t/p/original/fx6DkPz5tu4nqzFNT838VzJBPG1.jpg"
            alt=""
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            src="https://www.themoviedb.org/t/p/original/a4T4oeH2xNV7BpckgSUEzZlToJ1.jpg"
            alt=""
          />
        </SwiperSlide>
      </Swiper>
    </div>
  );
}