# Responsive fix for the Next.js Image component

> I found myself in the situation where I wanted to have real responsive images without providing height or width to the Image component.

Canonical URL: https://felixhaeberle.com/writings/responsive-fix-for-the-next-js-image-component
Markdown URL: https://felixhaeberle.com/writings/responsive-fix-for-the-next-js-image-component.md

## Metadata

Author: Felix Häberle
Published: 2021-05-03
Categories: Frontend Development

## Article

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.

```jsx
<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.

```scss
.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.