Next Image help

[light gyro]

Hi this is a bit urgent but, i have absolutely placed next image, how can i make it fill the whole height and resize width(with overflow) automatically?

[bronze rover]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[wet solstice]

try object-fit: cover;?

with full height ofc

@light gyro

[light gyro]

it still requires the width and height property

[wet solstice]

you should have height right? and for the width give the initial number for your max height

[light gyro]

i want to have height stretched according to the parent

[wet solstice]

I think what you are looking for is
https://nextjs.org/docs/app/api-reference/components/image#fill

try fill={true} @light gyro

[light gyro]

yeah but its kinda low quality

[wet solstice]

low quality? hmm by default next/image uses .75 for its quality

try add quality={100}

do you have wrong resolution or low quality?

[light gyro]

the resolution is more than enough

5760x1080

lol

[wet solstice]

sorry my bad words, I mean do you feel it stretched?

can you share the screenshot?

[light gyro]

okay so i fixed it somehow but its not overflowing:

<div className="absolute h-full border top-0 left-0">
        <Image
          className='h-full'
          src="/background.webp" 
          alt="Background"
          width={5760}
          height={1080}
          objectFit='cover'
          priority 
        />
      </div>

[wet solstice]

show me the screenshot - not much following

fill={true} why don't you try this btw?

[light gyro]

if i do fill={true} the iamge disappears