Preflight css for img overriding height prop for Image in Nextjs 13

[cryptoMavrik]

In experimenting with Nextjs 13, I've noticed that the height prop for images when using the Image component from /next/image is being overwritten by the preflight css.

img, video {
  max-width: 100%; 
  height: auto;
}

Any ideas for a solution that would accommodate for allowing the height prop to be used in Image without disturbing other use cases where the current settings are applicable?

[Russell-Savage]

Might be a little late now but one way you can do it is to use h-your_number or max-h-[your_numberpx] to override the base height setting.

Here's exactly how I used it when I found out that my height prop of 300 was being ignored:

          <Image
            src={project.image}
            alt={project.name}
            width={750}
            height={300}
            className="object-cover rounded-lg border border-gray-200 max-h-[140px]"
          />

For more options and further explanation see the docs: https://tailwindcss.com/docs/max-height