如何使用 Nextjs 和 tailwind 响应式布局？

Question

我正在尝试使用 NEXTJS 和 Tailwind 中的 flex 创建一张卡片，左边是图像，右边是卡片内容 CSS。

所以，我正在尝试让该图像具有响应性。

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

我对卡片中的图像进行了此设置。

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

图像消失。

所以，我尝试使用 layout=fill。图片显示，但不是封面图效果expected. 这是 <Image/> 与 layout=fill 和 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>

但是图像没有响应并且不占用 cover。

Answer 1

当使用 `layout="fill" 时，图像会在 X 轴和 Y 轴上增长以填充容器。

但是您必须相应地调整容器的大小，以实现响应能力或自行调整大小。图像根据容器的布局显示。

您可以使用以下代码段来制作完全响应式卡片。

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

在上面的代码片段中，查看如何在容器上使用 breakpoints 使其响应。更多此类片段可用 here。希望对您有所帮助！

Answer 2

使用此代码制作您的卡片。查看完整页面。

要使用 nextJs Image ，然后只需在下面的代码中尝试用 <div> 包装 <Image> 具有与 <img> 相同的属性并删除 height width 来自 <Image>。保持 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>

如何使用 Nextjs 和 tailwind 响应式布局？

How to use layout responsive with Nextjs and tailwind?

css

next.js

tailwind-css

next-images