next.jsnextjs-image

Nextjs Image not using the height value

I am new to NextJS and was using its Image tag to have an image in my application. But the image size only changes if I change its width value, changing height's value does not impact it at all. Here is the image:

<Image src="/Logo.png" alt="Logo" height={10} width={100} />

Here the image is taking the width's value and coming out to be big. If I replace the values in height and width, then also it takes the width's value and becomes small. I have even tried to put height property after width but nothing changes. What am I doing wrong here?

Solution

  • You can wrap the Image component inside a div and style it like this:

    <div style={{ position: "relative", width: `${100}px`, height: `${10}px` }}>
    <Image
        src="/Logo.png"
        alt="Logo"
        fill
        style={{ objectFit: "contain" }}
    />
</div>

    Note that: