score:-1

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>

score:0

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

score:6

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

score:9

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
}

score:24

<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"/>

score:76

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>

Related Query

More Query from same tag