Nextjs Image component and setting width and height with CSS

user_155196 0
Viewed 852

I am using the Image component that ships with Next.js but its forcing me to set the width and height as values. I am using Tailwind CSS and using their utility classes to set the height and width.

enter image description here

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

The HTML Css Code that works is

enter image description here

<img
    className="w-auto h-6 lg:block"
    src="/img/logo-dark.png"
    alt="nftHODL.club Logo"
/>
tailwind-css next.js css image html
1 Answers

Adding a wrapper div with the size and relative classes and then setting layout="fill" on the Image component should do the trick.

Example:

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

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

user_120982990
Related