Swiper images not the same height-CodePudding

Can't seem to figure this out, trying to force all image slides to be a uniform height. But some images are smaller/larger than others. I'm assuming it's a CSS thing I can't figure out. Anyone help out?

Code:

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

And CSS:

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

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

CodePudding user response：

You need to set .swiper-slide to 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;
}

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

CodePudding user response：

add specific width and height to images . by changing :

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

to :

<img
  style = {{'width': '300px', 'height': '400px'}}
  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}
  />