Responsive fix for the Next.js Image component

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.