next.jsnext-images

Next image not taking height

I'm giving height and width to a next image, and it doesn't set the height to what I'm telling it to set. It just sets the height to 100% and the widht works fine.

I'm using tailwind for the classes and the divs before do not have any other sizes that interfere with the image

<Image
  src={game.background_image}
  alt={game.slug}
  height="250"
  width="450"
  priority
  className="rounded-t-2xl"
/>

problem

EDIT: I had object-contain before in the classname but it didn't do anything

Solution

  • Wrap your in a div like so:

    <div>
    <Image
        src={game.background_image}
        alt={game.slug}
        height="250"
        width="450"
        priority
        className=" rounded-t-2xl"
    />
</div>

    This will make the height and width set inside the Next Image work as intended.