How to set the next/image component to 100% height

You have a image component and you want to set the next/image component to 100% height. you can solve it in multiple ways. And this is How to set the next/image component to 100% height:

Solution 1:

You have an Image component that you want to set 100% height. Example:

<Image src="/example.jpg" alt="example-img" layout="fill" />

 Wrap the Image component with div. Give the width and height 100% You have to set position relative; this is a must.

<div style={{width: "100%",height:"100%",position: "relative"}}>
 <Image alt="example image" src="/example..jpg" layout="fill" objectFit="contain" />
</div>

Solution 2:

Here is another way of solving it with external CSS. You want to have the image cover the entire height and width of a div.

<div className={‘container'}>
 <Image src={imgPath} layout="fill" className={'img'} /> 
</div>

First, take a div named container then set width and height value. Also set position relative Then, in the img class set height and width value 100% and position: relative

<div className={‘container'}>
 <Image src={path} layout="fill" className={'image'} /> 
</div>

external css:

.container { 
 width: 60vw;
 height: 60vh;
 position: relative; 
}
.img { 
 width: 100%;
 height: 100%; 
 position: relative !important;
}

Thank you for reading the article. If you face any problems let us know in the comment section below.