图像不适合其相对空间

Question

我一直在尝试使我不同大小的图像适合整个相对空间，但只有第二个填充它，第一个消失，最后一个填充只有一半的空间。任何想法吗?我一直在使用tailwind来设计样式，并使用swiper.js来浏览图像。

<div className="flex min-h-screen bg-clr1 items-center justify-center py-2 font-avenir">
<main className="grid grid-cols-2 min-h-screen w-full items-center justify-center px-16 text-center gap-8">
<div className="text-6xl">
Exquisite Parfums by Goliath
<Link href="/novo-produto">
<h3 className="text-3xl font-bold text-red-200 mt-6">
Our Collection
</h3>
</Link>
</div>
<Swiper
modules={[A11y, Autoplay]}
spaceBetween={0}
slidesPerView={1}
loop={true}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
className="bg-slate-600 max-w-prose relative"
>
<SwiperSlide>
<Link href="/novo-produto">
<Image
src="/img1.jpg"
alt="parfum1"
fill
style={{objectFit:"cover"}}
></Image>
</Link>
</SwiperSlide>
<SwiperSlide>
<Link href="/novo-produto">
<Image
src="/img2.jpg"
alt="parfum2"
width={700}
height={700}
></Image>
</Link>
</SwiperSlide>
<SwiperSlide>
<Link href="/novo-produto">
<Image
src="/img3.jpg"
alt="parfum3"
width={700}
height={700}
></Image>
</Link>
</SwiperSlide>
</Swiper>
</main>
</div>

Answer 1

autoHeight…SwiperJS模块脚本可以为你做高度调整吗?