I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.
I have tried the following:
<Image
src="/deco.svg"
alt=""
layout="fill"
/>
This snippet compiles successfully, but on the frontend, I see the following error:
Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.
This confuses me because according to the docs, these properties are not required when using layout="fill".
This is what worked for me:
<div style={{width: '100%', height: '100%', position: 'relative'}}>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
<img src="/path/to/image.jpg" alt="" title="" />
In NextJS
<Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>
Here is a way: For example I want to have an image that covers the whole width & height of its container which is a div.
<div className={'image-container'}>
<Image src={path} layout="fill" className={'image'} />
</div>
And here is the style: (There is a container div that occupies half width & height of viewport & my image will cover it.)
// Nested Styling
.image-container {
width: 50vw;
height: 50vh;
position: relative;
.image {
width: 100%;
height: 100%;
position: relative !important;
object-fit: cover; // Optional
}
}
// Or Normal Styling
.image-container {
width: 50vw;
height: 50vh;
position: relative;
}
.image-container .image {
width: 100%;
height: 100%;
position: relative !important;
object-fit: cover; // Optional
}