How to use layout responsive with Nextjs and tailwind?

Question

I am trying to create a card with image on the left and the card content on the right using flex in NEXTJS and Tailwind CSS.

So, I am trying to have that image to be responsive.

      <div className="block">
        <Image
          src={item.cover}
          alt="Picture of the something nice"
          width={200}
          height={200}
          layout="responsive"
          quality={65}
        />
      </div>

I have this setup for the image in a 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 the 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 image disappears.

So, I have tried using layout=fill. The image shows but it is not taking the cover image effect as expected. Here is the <Image/> 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 the something nice"
          layout="fill"
          objectFit="cover"
        />
      </div>

But the image is not responsive and does not take cover.

Answer 1

Use this code to make your card. See in full page.

To use nextJs Image , then just try to wrap <Image> with <div> having same properties of <img> in the below code and remove height and width from <Image>. Keep layout =responsive.

<script src="https://cdn.tailwindcss.com"></script>
<div class="container m-auto p-4">
  <div class="flex justify-center">
    <div class="flex flex-col md:flex-row md:max-w-xl rounded-lg bg-white shadow-lg">
      <img class=" w-full h-96 md:h-auto object-cover md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg" src="https://mdbootstrap.com/wp-content/uploads/2020/06/vertical.jpg" alt="" />
      <div class="px-6 py-10 flex flex-col justify-start">
        <h5 class="text-gray-900 text-xl font-medium mb-2">Card title</h5>
        <h5 class="text-gray-500 text-md font-extralight mb-2">Artist</h5> 
        <p class="text-gray-700 text-base mb-4">
          This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </p>
        <p class="text-gray-600 text-xs">Author</p>
      </div>
    </div>
  </div>
</div>

Answer 2

When using `layout="fill", the image grows in both X and Y axes to fill the container.

But you have to size your container accordingly to achieve responsiveness or correct size on your own. Image is displayed according to the container's layout.

You can use the following snippet, for a completely responsive card.

<div class="max-w-sm w-full lg:max-w-full lg:flex">
  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden 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="a car"
      layout="fill"
      objectFit="cover"
    />
  </div>
  <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
    <div class="mb-8">
      <h2 class="text-gray-900 font-bold text-xl mb-2">A card</h2>
      <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Voluptatibus quia, nulla! Maiores et perferendis eaque,
        exercitationem praesentium nihil.
      </p>
    </div>
  </div>
</div>

In the snippet above, look at how breakpoints are used on the container to make it responsive. More such snippets are available here. I hope it helps!