似乎无法弄清楚这一点,试图强制所有图像幻灯片具有统一的高度。但有些图像比其他图像更小/更大。我假设这是我无法弄清楚的 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>
Run Code Online (Sandbox Code Playgroud)
和CSS:
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: …Run Code Online (Sandbox Code Playgroud)