Next Image Height Issue
Unanswered
kazii posted this in #help-forum
kaziiOP
Hi folks,
Why is that additional height being added in the first render?
Also, if height={0} as by default it's a layout shift, nothing is shown by default.
How to handle such cases?
This is my [image](https://cf.dino.co.in/misc/banner/website-shop-banner-2.png)
Why is that additional height being added in the first render?
Also, if height={0} as by default it's a layout shift, nothing is shown by default.
How to handle such cases?
This is my [image](https://cf.dino.co.in/misc/banner/website-shop-banner-2.png)
<div className='w-full shrink-0 grow basis-auto'>
<Image
src='https://cf.dino.co.in/misc/banner/website-shop-banner-2.png'
alt='Picture of the author'
sizes='100vw'
style={{
width: '100%',
height: 'auto',
}}
width={900}
height={250}
/>
</div>7 Replies
u are only using tailwind?
could also be that the component under your image is on the client and before u return any tsx u are doing some operations why the layout doesnt compute correctly
does the same also happen on build?
@gin u are only using tailwind?
kaziiOP
Yes I'm using tailwind.
This carousel is being rendered via embla, so these are the client components.
Build doesn't have the layout shift.