Nextjs 图像组件和使用 CSS 设置宽度和高度

【问题标题】：Nextjs Image component and setting width and height with CSSNextjs 图像组件和使用 CSS 设置宽度和高度
【发布时间】：2021-11-01 23:26:58
【问题描述】：

我正在使用 Next.js 附带的 Image 组件，但它迫使我将宽度和高度设置为值。我正在使用 Tailwind CSS 并使用它们的实用程序类来设置高度和宽度。

<Image
      src={imageSrc}
      alt={name}
      className="object-cover object-center"
      layout="fill"
/>

有效的 HTML Css 代码是

<img
    className="w-auto h-6 lg:block"
    src="/img/logo-dark.png"
    alt="nftHODL.club Logo"
/>

【问题讨论】：

标签： html css image next.js tailwind-css

【解决方案1】：

添加一个包含大小和relative 类的包装器div，然后在Image 组件上设置layout="fill" 应该可以解决问题。

例子：

<div className="h-64 w-96 relative"> // "relative" is required; adjust sizes to your liking
  <Image
    src={img.img}
    alt="Picture of the author"
    layout="fill" // required
    objectFit="cover" // change to suit your needs
    className="rounded-full" // just an example
  />
</div>

来源：https://techinplanet.com/how-to-use-tailwind-css-with-next-js-image/

【讨论】：