This content originally appeared on DEV Community and was authored by Felix Häberle
Currently, layout="responsive" requires you to set width and height which you don't want to set because you don't know what the aspect ratio is going to be.
This is a new change since version 10.0.1 where the team around Next deprecated the unsized prop, replacing it with layout="fill" – which doesn't gives you the same functionality.
Also, if you're going to set layout="fill" and objectFit="cover" on the Image component you will get a strange behavior. There are cases in which you can fix this with position: relative on the parent item, but then you also have to set width and height which you don't want in case of a responsive image.
There is an easy fix to this problem, you only have to set a wrapper around the Image component to give a bit of extra styling.
First, we have to add the wrapping item with the class image-container. Please adjust this to fit your styling needs, e.g. if you're using styled-components the syntax will look slightly different.
<div className={'image-container'}>
<Image src={path} layout="fill" className={'image'} />
</div>
For this to work, it's important that you add two classes: image-container to the parent element and image to the Image component. After adding these classes, you should add this styling.
.image-container {
width: 100%;
> div {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
}
And that's it! ?
Your images should now display with the right dimensions and should scale up to 100% width and at the same time having the correct height.
This content originally appeared on DEV Community and was authored by Felix Häberle
Felix Häberle | Sciencx (2021-05-06T16:01:02+00:00) Responsive fix for the Next.js Image component. Retrieved from https://www.scien.cx/2021/05/06/responsive-fix-for-the-next-js-image-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.