I am attempting to design a card layout where the image is on the left and the content of the card is on the right using flex in NEXTJS and Tailwind CSS.
My goal is to ensure that the image remains responsive.
<div className="block">
<Image
src={item.cover}
alt="Picture of something nice"
width={200}
height={200}
layout="responsive"
quality={65}
/>
</div>
This is how I have set up the image within the card:
<div className="container max-w-3xl text-white bg-card flex rounded space-x-5">
<div className="block">
<Image
src={item.cover}
alt="Picture of something nice"
width={200}
height={200}
layout="responsive"
quality={65}
/>
</div>
<section className="flex flex-col mt-2">
<h1 className="capitalize text-lg font-semibold">{item.title}</h1>
<h2>{item.alias}</h2>
<h3>{item.artist}</h3>
<h3>{item.author}</h3>
<p>{item.description}</p>
</section>
</div>
The issue arises when the image disappears.
https://i.sstatic.net/MEJn1.png
I attempted using layout=fill. While the image appears, it does not achieve the desired cover image effect as seen in this example.
Below is the <Image/> tag with layout=fill and objectFit=cover:
<div className="block w-36 relative">
<Image
src={
'https://images.unsplash.com/photo-1651786291345-d6e61ac65358?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80'
}
alt="Picture of something nice"
layout="fill"
objectFit="cover"
/>
</div>
However, the image is still non-responsive and fails to maintain the cover aspect. https://i.sstatic.net/1gfsU.png