NextJS Image taking full height of parent
Answered
Chartreux posted this in #help-forum
ChartreuxOP
Hello guys, I am having trouble using NextJS as a background image inside a div. I want it to take the full height. Now the div overlap a little at the bottom.
The weird thing is however that it looks good at first glance, but once you start scrolling in the elements the overlap comes. Here is a live demo of the site: https://238d-2001-4651-39f8-0-908c-1f12-42a2-fcb2.ngrok-free.app/kittens - view it with mobile. look at the elements. go up and down with the scroll. suddenly after some scrolling the NextJS Images doesnt take the full height and the background with bg-zinc-400 gets a little bigger on the bottom :S
Here is the source of the two components producing that grid: https://pastebin.com/VCF8PGEY
The weird thing is however that it looks good at first glance, but once you start scrolling in the elements the overlap comes. Here is a live demo of the site: https://238d-2001-4651-39f8-0-908c-1f12-42a2-fcb2.ngrok-free.app/kittens - view it with mobile. look at the elements. go up and down with the scroll. suddenly after some scrolling the NextJS Images doesnt take the full height and the background with bg-zinc-400 gets a little bigger on the bottom :S
Here is the source of the two components producing that grid: https://pastebin.com/VCF8PGEY
Answered by fuma
It's a CSS styling problem.
Since the container is a grid layout, all the heights of elements will be the same. Therefore, when some elements have a larger height, the other elements will have the problem you mentioned.
Some solutions:
1. Use flexbox layout with
2. Use
Also add
Since the container is a grid layout, all the heights of elements will be the same. Therefore, when some elements have a larger height, the other elements will have the problem you mentioned.
Some solutions:
1. Use flexbox layout with
flex-direction: column2. Use
height: 100% on your a and img element (this may break the aspect ratio)Also add
object-fit: cover if you don't want to stretch the image13 Replies
It's a CSS styling problem.
Since the container is a grid layout, all the heights of elements will be the same. Therefore, when some elements have a larger height, the other elements will have the problem you mentioned.
Some solutions:
1. Use flexbox layout with
2. Use
Also add
Since the container is a grid layout, all the heights of elements will be the same. Therefore, when some elements have a larger height, the other elements will have the problem you mentioned.
Some solutions:
1. Use flexbox layout with
flex-direction: column2. Use
height: 100% on your a and img element (this may break the aspect ratio)Also add
object-fit: cover if you don't want to stretch the imageAnswer
@fuma It's a CSS styling problem.
Since the container is a grid layout, all the heights of elements will be the same. Therefore, when some elements have a larger height, the other elements will have the problem you mentioned.
Some solutions:
1. Use flexbox layout with `flex-direction: column`
2. Use `height: 100%` on your `a` and `img` element (this may break the aspect ratio)
Also add `object-fit: cover` if you don't want to stretch the image
ChartreuxOP
that wont work cause then the items without an image wont get any height 😮
thats why im using
gridon the parent. with grid-auto-rows: minmax(0, 1fr)I can confirm that as I can fix it with adding some styles on my devtools
ChartreuxOP
does the elements that only have bg-zinc-400 without the image render aswell then?
if I do flex with columns those wont have any height
So you also want to let the elements have the same height?
Then go with solution 2
ChartreuxOP
aight ill try it
it worked!
thank you i have literally tried everything for hte last 2hours ! 😄
gonna celebrate making some breakfast 😄
â¤ï¸