Responsive fix for the Next.js Image component

=> First, we have to add the wrapping item with the class image-container and image class to Image component.

<div className={'image-container'}>

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

</div>

=> you need to add below styling

.image-container {

? ? width: 100%;

}

.image-container > div {

? ? position: unset !important;

}

.image-container .image {

? ? object-fit: contain;

? ? width: 100% !important;

? ? position: relative !important;

? ? height: unset !important;

}