Figuring out Next/Image width and height
Answered
Common Greenshank posted this in #help-forum
Common GreenshankOP
Hello all im trying to make sure i understand how to make this work... i feel like im playing whackamole trying to figure out how to properly fit my images. If my actual image size is 2000x1000, how do i properly set my width and height settings to be dynamic and take up the full image width on desktop vs mobile
11 Replies
ok so @Common Greenshank
Answer
make a div, give it the responsive width you need
give it the relative class
like position: relative
(idk if you using tailwind)
now in your image remove the width and height, give it a property of fill
and finally add a sizes tag, this is how to fill it
imagine you made it so for a min width of 320px, the width is 50vw, else its 500px
so
sizes="(min-width: 320px) 50vw, 500px"
sizes="(min-width: 320px) 50vw, 500px"
Common GreenshankOP
wow than kyo u
this works