Next.js Discord

Discord Forum

Next Image help

Unanswered
aa55h posted this in #help-forum
Open in Discord
aa55hOP
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?

23 Replies

James4u
try object-fit: cover;?
with full height ofc
@aa55h
@James4u try `object-fit: cover;`?
aa55hOP
it still requires the width and height property
James4u
you should have height right? and for the width give the initial number for your max height
@James4u you should have `height` right? and for the `width` give the initial number for your max height
aa55hOP
i want to have height stretched according to the parent
James4u
I think what you are looking for is
https://nextjs.org/docs/app/api-reference/components/image#fill
try fill={true} @aa55h
aa55hOP
yeah but its kinda low quality
James4u
low quality? hmm by default next/image uses .75 for its quality
try add quality={100}
do you have wrong resolution or low quality?
aa55hOP
the resolution is more than enough
5760x1080
lol
James4u
sorry my bad words, I mean do you feel it stretched?
can you share the screenshot?
aa55hOP
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>
James4u
show me the screenshot - not much following
fill={true} why don't you try this btw?
aa55hOP
if i do fill={true} the iamge disappears
James4u
try adding width to the parent div