CODEWITHSUNDEEP
next.jsnextjs-image
Akhil-Sharma02
Akhil-Sharma02

Reputation: 93

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?

Upvotes: 1

Views: 3849

Answers (3)

JohnZ
JohnZ

Reputation: 133

Neither of the 2 answers above works for me in 2024. Instead, try this:

  <div style={{position: "relative", height: '200px', width: '200px'}}>
      <Image src={image}  width={0} height={0} sizes ="100vh" style={{height: '100%', width: 'auto' }} />
  </div>

This answer is inspired from this post, which did it for width but not height https://stackoverflow.com/a/76008677/13994888.

Upvotes: 0

eroironico
eroironico

Reputation: 1372

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:

  • The wrapper div has a relative position since fill Images are absolute positioned inside the DOM
  • fill is a prop in next 13 (older versions use layout="fill")
  • objectFit is passed inside the style object (with optional objectPosition) and those properties will be added to the rendered span element style properties

Upvotes: 4

Prabhjeev Nijjar
Prabhjeev Nijjar

Reputation: 50

Wrap tag in a with the height and width you want your image to be

Add layout="fill" in the tag

<div style={{width: '100px', height: '100px'}}>
  <Image
    src="/Logo.png"
    alt="Logo"
    layout='fill'
    objectFit='contain'
  />
</div>

Upvotes: 1

Related Questions