Image component
Answered
Black carp posted this in #help-forum
Black carpOP
Hey, is there a way to keep my images responsive? From the research i've done the Image component sizes are passed in pixels. Is there a way to use other units or percentage (%)?
30 Replies
yes
use the fill property on the Image component
and wrap it with a div, with a position property of anything (just cant be static.. so relative etc)
then give that div any responsive css you want
the image will fill its parent div
@Black carp
Black carpOP
That is exactly what I did and it did not work
those are old props
Answer
not sure why you didnt get warns
but its just fill={true}
or just fill
also objectFit is also old
style={{objectFit: "contain"}}or just use className, upto you
https://nextjs.org/docs/app/api-reference/components/image#responsive-image-with-fill
its given here in detail if needed
its given here in detail if needed
Black carpOP
Still incredibly big?
My current resolution is 2K
you forgot the position style
give position: relative to the .background class
Black carpOP
It's a div, it has position: static on default no?
static dosent work
i mentioned
and wrap it with a div, with a position property of anything (just cant be static.. so relative etc)
Black carpOP
Oh I thought it said "can"
mb lol
No worries
Fixed?
Philippine Crocodile
What if you use aspect ratio?
@Arinji Fixed?
Black carpOP
Yeah
@Black carp Yeah
Awesome, mark an answer
Original message was deleted
Boop