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".
<Image src='/images/wipster-medialibrary-1.png' width="100%" height="100%" layout="responsive" objectFit="contain"></Image>
worked for me, assuming you want image to fit into the Parent container.
Do NOT use layout='fill' it really just makes the image fit the Whole Screen for some reason.
In case you dont want to use absolute values for height and width , that is in px etc , you can do something like this
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
<Image
alt="Image Alt"
src="/image.jpg"
layout="fill"
objectFit="contain" // Scale your image down to fit into the container
/>
</div>
Original source https://stackoverflow.com/a/66358533/12242764
If someone use NextJS with styled components. It works:
const Container = styled.div`
width: 100%;
div, span {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
`;
<Container>
<Image src={ src }
layout="fill"
className={ "image" }
/>
</Container>
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
}
<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"/>
I think also provide object-fit attribute on the Image element like this:-
<Image
alt="Mountains"
src="/mountains.jpg"
layout="fill"
objectFit="cover"
/>
Example provided by Nextjs can be https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js
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>