next/image - Make image fill available space without specifying height or width

#react #nextjs #css #performance

The Next.js Image component has built-in Lazyloading but forces you to specify a width & height. Yet most times you do not know this information beforehand. Nor do you want images to look squashed by providing the wrong width or height.

I discovered with a few lines of CSS you can get around this. Thus your images will fill all the available space in the div.

So wrap the component with an unset-img class and give the component itself the className custom-img. Note the layout mode must be set to "fill".

<div className="unset-img">
  <Image alt="Mountains" src="/project/pexels-photo.jpeg" layout="fill" className="custom-img"
   />
</div>

Here is the CSS which overrides the next.js functionality.

.custom-img {
  object-fit: contain;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
}

.unset-img {
  width: 100%;
}
.unset-img > div {
  position: unset !important;
}

Top comments (8)

osaxon • Sep 20 '21

Hi all, I've had trouble with this and managed to get it working by using width height at 100% and objectFit property 'contain' all as props within the Image component.

          <Image
            src={Logo}
            width='100%'
            height='100%'
            objectFit='contain'
            alt='Brand logo'
          />