Layout fill in nextjs 10.0.1 doesn't respect any height, width, maxwidth, maxheight styles

[agcty]

I'm using nextjs 10.0.1-canary-6 with the new fill layout that replaces the unsized prop and i just want to set a maximum height and width for my image but it just isn't possible:

Update: still applies to 10.0.1

import React from "react";
import Image from "next/image";

function test() {
  return (
    <div
      style={{
        width: "200px",
        height: "200px",
        maxHeight: "200px",
        maxWidth: "200px",
      }}
    >
      <Image
        src={"renders/KMxNJT7MKtCGg7QkpKCL/KMxNJT7MKtCGg7QkpKCL.png"}
        layout="fill"
        style={{
          width: "200px",
          height: "200px",
          maxHeight: "200px",
          maxWidth: "200px",
        }}
      />
    </div>
  );
}

export default test;

The image component doesn't respect ANY styling that restricts dimensions.

It's literally as big as the whole page!

[Timer]

You have to configure position relative for the parent.

Could you please try that and let us know?

<div
      style={{
        position: "relative",
        width: "200px",
        height: "200px",
        maxHeight: "200px",
        maxWidth: "200px",
      }}
    >

[RamonAmaro]

GOOOD !!!!

[leerob]

@costelinivictor #26615

[webjoyable]

You have to configure position relative for the parent.

Could you please try that and let us know?

<div
      style={{
        position: "relative",
        width: "200px",
        height: "200px",
        maxHeight: "200px",
        maxWidth: "200px",
      }}
    >

Hell yea! I almost gave up

[Ritap89]

agree it needs to be on documentation

[leerob]

This is now in the documentation 👍

[agcty]

Adding position relative does work but in this case it seems that you need width and height attributes.

For example if I remove width and height attributes and just leave maxWidth and maxHeight:

function test() {
  return (
    <div
      style={{
        position: "relative",
        maxHeight: "200px",
        maxWidth: "200px",
      }}
    >
      <Image
        src="renders/KMxNJT7MKtCGg7QkpKCL/KMxNJT7MKtCGg7QkpKCL.png"
        layout="fill"
      />
    </div>
  );
}

I would expect the image to "fill" the available space. But instead, the image is 0x0 big:

Even if i explicitly set width and height to 100% the result stays the same:

<div
        style={{
          position: "relative",
          maxHeight: "200px",
          maxWidth: "200px",
        }}
      >
        <Image
          src="renders/KMxNJT7MKtCGg7QkpKCL/KMxNJT7MKtCGg7QkpKCL.png"
          layout="fill"
          style={{ width: "100%", height: "100%" }}
        />
      </div>

But if I use the normal img tag, everything behaves as expected:

function test() {
  return (
    <div
      style={{
        position: "relative",
        maxHeight: "200px",
        maxWidth: "200px",
      }}
    >
      <img
        style={{ width: "100%", height: "100%" }}
        src="https://images.unsplash.com/photo-1604321951949-e9d5710716db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3578&q=80"
      />
    </div>
  );
}

[sam-abdul]

The image tag is different. Had you been used the Image tag that styling will be meaningless because the Next Image tag doesn't accept that width and height that way.

[dreidles]

This worked for me

<div
  style={{
    position: "relative",
    width: "50vw",
  }}
>
  <Image alt="controller" src={controller_img} layout='responsive' width='100%' height='100%' />
</div>

[telegdiarmin]

This is just exactly what I was looking for all day, thank you!

[agcty]

Ok so codesandbox seems to have problems installing the next.js canary and actually rendering anything but I managed to deploy it to vercel:

https://csb-i3hk3-8a8ckr8o5.vercel.app/

And here's the sandbox: https://codesandbox.io/s/quizzical-shannon-i3hk3?file=/pages/index.js

[Timer]

What are you trying to get the image to do?

[agcty]

I just want the image to not exceed certain dimensions. Basically I want an image container that the image is not allowed to exceed, I also don't want to set the width and height on the image itself because I don't know the exact dimensions ahead of time, hence I need to use layout="fill".

So just what the canary 6 docs describe really (https://github.com/vercel/next.js/blob/canary/docs/api-reference/next/image.md)

If fill, the image will stretch both width and height to the dimensions of the parent element.

[Timer]

Have you tried using layout="responsive" then instead?

[agcty]

yes but responsive requires you to set width and height which I don't want to set because I don't know what the aspect ratio is going to be

[yulev5]

the new Next js Image component is really not easy to use...
I didn't like it
and spend a lot of time trying to work with is successfully

[luknl]

Yes, layout="fill" doesn't actually replace unsized.

• Example 1, with 10.0.0 and unsized: https://codesandbox.io/s/blissful-pasteur-67ogm?file=/pages/index.js
  --> displays the image's default width/height, without needing a wrapper. That's what we personally want in our project.

• Example 2, with 10.0.1 and layout="fill" https://codesandbox.io/s/recursing-blackburn-gc0kl?file=/pages/index.js
  --> if we replace unsized with layout="fill", the image takes full width/height (page /index) It's only if we add a wrapper around it, with the image's width/height that it shows correctly (page /index2)

Is there a way to have same behavior as it had with unsized?

[vasc1]

I'm in this, the dimensions of my image are not known and when I use the fill layout, it stretches in both dimensions. What I really want to generate is the largest image on the display that is being shown without stretching the image.

[Timer]

How about this?

      <Image
        src={"renders/KMxNJT7MKtCGg7QkpKCL/KMxNJT7MKtCGg7QkpKCL.png"}
        objectFit={"cover"}
        width={200}
        height={200}
      />

[Timer]

You can do all of the same things as long as you don't introduce layout shift. There's no need for unsized.

[wKovacs64]

@wKovacs64 if you don't know its dimensions you can use layout="fill" and size it via the parent component.

@Timer Apologies, but I'm not following. The parent (currently, without next/image) grows to accommodate the image. We can't size the parent any easier than we can size the image itself if we don't know the dimensions. The parent does have a max width, and the image should fill that width and cause the parent height to grow to allow for the image to fit inside (maintaining its aspect ratio). Using layout="fill" does not do that (as other people have mentioned here, it currently fills the entire viewport). I still can't tell if next/image is bugged or if I'm just too stupid to use it. 😅

Here's a CSB that illustrate what I'm trying to do:

https://codesandbox.io/s/loving-voice-4v386?file=/pages/index.js

The <img /> works fine, while <Image /> does not.

[trompx]

Same here, I need a way to display an image just specifying one of its dimension. Is the feature proposal described here #18497 going to be implemented @Timer, at least for local image?

[Timer]

The demo you posted with a normal <img /> suffers from layout shift. next/image does not allow you to do this.

See the demo you provided:

---

You have two options:

1. Define the width and height.
2. Use layout="fill" and size it naturally by matching the height of the text node.

Here's the example using layout="fill":

Using your provided code:

import Image from "next/image";
import { css } from "@emotion/react";

function IndexPage() {
  return (
    <main
      css={css`
        display: flex;
        justify-content: center;
      `}
    >
      <article
        css={css`
          background-color: #f4f4f4;
          border-top: 4px solid indigo;
          border-radius: 5px;
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
          display: grid;
          align-items: center;
          grid-template-columns: 1fr 1fr;
          grid-gap: 2rem;
          padding: 2rem;
          max-width: 60rem;
        `}
      >
        <div style={{ position: "relative", height: "100%" }}>
          <Image
            src="https://picsum.photos/500/952"
            alt="some pic"
            layout="fill"
            objectFit="cover"
            css={css`
              border-radius: 5px;
              box-shadow: 0 4px 8px 0 rgba(75, 0, 131, 0.2);
            `}
          />
        </div>
        <section>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </section>
      </article>
    </main>
  );
}

export default IndexPage;

[wKovacs64]

@Timer OK, gotcha. That example does cause layout shift, although it was intended to be a simplification of a situation where one might be using gatsby-image which prevents layout shift for you by figuring out the image dimensions at build time and stubbing in a low quality image (SVG wireframe, blurred version, etc.). Since next/image doesn't/can't do that, you really have to know the image dimensions ahead of time (which may mean a significant change to how images work on a site - which may be what you want people to do anyway, to improve everyone's experience on the web 🙂).

Thanks for taking the time to go through it.

[vasc1]

like that https://user-images.githubusercontent.com/48503371/98456358-72669c80-215b-11eb-9e6b-3ec6643c7a85.png

[faligowski]

Did you solve this? Property "fill" always fits to the viewport & not to parent element as expected. In 10.0.0 unsized worked good, but layout="fill" 's behavior is not the same.

[theprantadutta]

@faligowski make the parent div relative. layout="fill" sets the image as absolute.

[apotdevin]

Same here. In version 10.0.0 the new Image component worked as expected but updated to latest version and now every single image grows to occupy the height and width of the screen.

I understand the preference to not have this content shift by default, but the previous behaviour (and how I think everyone expects the img tag to work) should still be available imo

Also, isn't this a breaking change? On version 10.0.0 the Image component didn't need any props, updated and now I can't run the app because of this

[trompx]

Hey @Timer,

I am well aware of the layout shift problem the next image is trying to solve, but for some projects I want to leverage the next image component for the dynamic optimization of the image (creation of multiple versions, srcset, sizes etc.).
For those projects I don't care about the layout shift, I just want to set the image with a specific width (or height) and let the image occupy its original dimensions.
I thought to get the image dimensions and render the next image only when it's done, problem is that each time it will load the full size image. Is there a way to get the lowest size generated image path after the multiple versions have been generated the first time ? I could live with having to wait to get the dimensions before rendering the image, but I really don't want to have to know in advance the dimension and set them manually.

Something like:

const getDim = (url, callback) => {
  var img = new Image();
  img.src = url;
  img.onload = function () {
    callback(this.width, this.height);
  };
};

const ResponsiveImage = ({ src }) => {
  const [width, setWidth] = useState();
  const [height, setHeight] = useState();
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    getDim(src, function (w, h) {
      setLoaded(true);
      setWidth(w);
      setHeight(h);
    });
  }, [src]);

  if (!loaded || !width || !height) {
    return "";
  }

  return (
    <ImageWrapper>
      <NextImage
        src={src}
        quality="85"
        width={width}
        height={height}
      />
    </ImageWrapper>
  );
};

It would be really awesome to not have to specify the dimensions in advance. Let me know if I can help in any way.
Feature request issue

[iampava]

I think you should bring back the unsized prop in one way or another. Obviously layout="fill" is not a total replacement, and having to add wrapping divs for it to work is messing up the HTML.

For example, I want a vertical gallery, each image 100%. I'm forced to add container divs around each image, thus bloating the HTML.

---

On a more general note, I think the overall design of this component should be updated. It should first be a drop-in replacement of HTML <img> tag. Everything that works in plain HTML should work here by default: meaning I shouldn't be forced to add widths/heights, etc.

Then if you want to add extra features, great and I agree it saves us a lot of time, but they should not have to be enforced on an API level.

[luknl]

@Timer can you please see if something can be done about that?
I still think many people think the current implementation is good but not 100% fitted for our needs.
See discussion above + my comment for more details.

[luknl]

@iampava @trompx @apotdevin @faligowski @agcty, have any of you found a solution for this issue?

[trompx]

Unfortunately nothing on my side, hopefully this will be taken in account at one point, I need to release a client project soon and I don't see myself having to manually set the width and height of hundreds of images^^

[iampava]

To be honest I changed my code to use the default <img/> tag...

[odegraciajr]

Any updates on this? I'm still having this issue.

[arnovanstaden]

Hi Guys

I got my image to fill the entire width of the parent container & maintaining the image's aspect ratio by fiddling with the default css next/image adds. Might not be too pretty but it's all I can find to work. Hope this helps someone

Next 12 Update:
Replace any styles applied to div and apply them to the updated span tag instead.

JS

<div className={styles.imageContainer}>
        <Image src={path} layout="fill" className={styles.image} />
</div>

CSS

.imageContainer {
        width: 100%;

        >div {
            position: unset !important;
        }

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

[theskillwithin]

this took way too long to figure out. wow

[Weitulezi]

boy what a mess

[vixniv]

thank you so much for helping me ✨

[eldoy]

I spent the whole day trying to display an image on a web page in 2022. We are devolving so badly, good luck guys.

[rjc23]

This is exactly what I needed! I changed div to span

[natelindev]

Base on @arnovanstaden 's solution, I've created this Image componeng that is truely "fill" layout
It allows you to set any width, height and it will exactly be that width, height, no more going out of bounds
you can even add image overlay
with the help of styled-system you can do stuff like width={[1, 1/2, 1/3 ]}
suiteable for css-in-js users

import NextImage from 'next/image';
import React from 'react';
import {
  flexbox,
  FlexboxProps,
  height,
  HeightProps,
  margin,
  MarginProps,
  maxHeight,
  MaxHeightProps,
  maxWidth,
  MaxWidthProps,
  padding,
  PaddingProps,
  width,
  WidthProps,
} from 'styled-system';

import styled from '@emotion/styled';

const ImageContainer = styled.div<HeightProps & WidthProps & MaxHeightProps & MaxWidthProps>`
  > div {
    &:first-child {
      position: unset !important;
    }
    margin-top: ${(props) => props.theme.heights.navbar};
    max-height: ${(props) => props.height};
    width: ${(props) => props.width};
  }
  display: flex;
  ${height}
  ${width}
  ${maxHeight}
  ${maxWidth}
`;

const BaseImage = styled(NextImage)`
  object-fit: cover;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
`;

const ImageOverlay = styled.div<PaddingProps & MarginProps & FlexboxProps>`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
  color: ${(props) => props.color};
  text-decoration: none;
  ${padding}
  ${margin}
  ${flexbox}
`;

type ImageProps = React.ComponentProps<typeof ImageContainer> &
  Omit<React.ComponentProps<typeof NextImage>, 'width' | 'height'>;

const Image = (props: ImageProps) => {
  const { width, height, maxHeight, maxWidth, children, ...rest } = props;
  return (
    <ImageContainer width={width} height={height} maxHeight={maxHeight} maxWidth={maxWidth}>
      <BaseImage layout="fill" {...rest} />
      {children && <ImageOverlay>{children}</ImageOverlay>}
    </ImageContainer>
  );
};

export default Image;

[luknl]

Very cool!
I transformed it a bit and made a shorter version with twin.macro:

import NextImage from 'next/image';
import React from 'react';
import tw, { styled } from 'twin.macro';

const ImageContainer = styled.div`
  > div {
    &:first-of-type {
      position: unset !important;
    }
    ${({ height }) => height && `max-height: ${height}`};
    ${({ width }) => width && `width: ${width}`};
  }
`;
const BaseImage = styled(NextImage)`
  object-fit: cover;
  width: 100% !important;
  position: relative !important;
  height: unset !important;
`;

const ImageOverlay = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
  width: ${({ color }) => color};
  text-decoration: none;
`;

const Image = (props) => {
  const { width, height, maxHeight, maxWidth, children, ...rest } = props;
  return (
    <ImageContainer width={width} height={height} maxHeight={maxHeight} maxWidth={maxWidth}>
      <BaseImage layout="fill" {...rest} objectFit="cover" objectPosition="center" />
      {children && <ImageOverlay>{children}</ImageOverlay>}
    </ImageContainer>
  );
};

export default Image;

[MarianKmotorka]

Can this be achieved also by using styled-components only ?

[luknl]

yes for sure!

[tumetus]

Anyone looking for a video explanation, here is a video showing how to implement the solution @arnovanstaden shared

[gregonarash]

@tumetus Thank you for making the video it helps to have w walk through.

[sturgeonphillip]

@tumetus you've got a new yt subscriber. @arnovanstaden I'm very grateful for you as well.

[sairajchouhan]

Is this issue still exists after next@11 release

[johncmunson]

yes

[talaikis]

Problem with existing solution for next@11 that it is pretty hard to manage, for example, having a lot of different combinations widths, heights and positions on the page. next/image basically became useless component.

[luknl]

Hey! Found a solution with styled that makes all images have their native size by default, and that lets you also change their size if wanted.
You can do the latter by adding a width with !important to the component's style. We use twin.macro for our project so it looks like this for us: <Image src="PATH_TO_IMG" alt="alt text" tw="w-3!"/>

Here is the full code of the custom <Image/> component I made:

import NextImage from 'next/image';
import { styled } from 'twin.macro';

const BaseImage = styled(NextImage)`
  object-fit: contain;
  width: auto !important;
  position: relative !important;
  height: 100% !important;
`;
const ImgContainer = styled.div`
  > div {
    position: unset !important;
    height: 100%;
  }
`;

const Image = (props) => {
  const { ...rest } = props;
  return (
    <ImgContainer>
      <BaseImage {...rest} layout="fill" />
    </ImgContainer>
  );
};

export default Image;

Hope it helps!

[28development]

Does the issue still exists with Next 12?

[trickreich]

yes.. I am not able to max the height..

[dominik-sfl]

does the fix here still work with Next 12?

I just upgraded and it doesn't seem to do the trick anymore! Anyone else?

[dominik-sfl]

Oh, I think I figured it out. In Next 12 the div wrapper around the image is now a span, so

 & > div {
        position: unset !important;
        height: 100%;
    }

now needs to be

 & > span { 
        position: unset !important;
        height: 100%;
    }

[natalyjazzviolin]

This helped, but the image is stretching horizontally. Have you run into this? Thank you for your input!

[yannicschroeer]

Wow I can't believe I couldn't figure this out. Thank you for pointing this out

[bkrsmanovic]

So, mostly for my purposed, I would like to have solution set with Height, not width. Width should be auto, but height should be set.

Here is snippet for that, if anyone needs it:

import NextImage from 'next/image'

const Image = ({ src, className,  height, ...rest }) => {
    return (
        <div className={`_image-container ${className}`} style={height ? {height: height} : null}>
            <NextImage className='_image' layout='fill' src={src} { ...rest } />
        </div>
    );
};

export default Image;

Styles for _image-container and _image:

._image-container {
    position: relative;

    & > span {
        position: static !important;
        height: 100% !important;
    }
}

._image {
    object-fit: contain;
    width: 100% !important;
    position: static !important;
    height: unset !important;
}

Usage:

import Image from '@components/partials/image';

<Image
      className='customClass'
      layout='fill'
      height={50}
      src='/images/src.jpg' />

You can specify height in module, or skip height, and use .customClass to control height on different screens:

.customClass {
    height: 50px;
}

@media (min-width: 768px) {
    height: 150px;
}

Useful for logos, and other scenarios where you need height, but keep width auto.
Cheers!

[Yochyo]

When I used the solutions above, I had the issue that the container was bigger than the image. For my use case the container had to be exactly the size the image will use.

This snippet has one downside , you need to pass the original resolution of the image to the component.
I'm sure the code can be optimized a lot, but here it is.

import * as React from 'react';
import NextImage from 'next/image';

type Props = {
  src: string;
  //resolution of the source file
  resHeight: number;
  resWidth: number;

  //desired height/width
  height?: number | string;
  width?: number | string;
  //specify whether the height or width value should be used to size the image. Useless unless both width and height are specified. Default: height.
  resizeBy?: 'height' | 'width';
};
export const Image = (props: Props) => {
  const resizeBy = props.resizeBy || props.height ? 'height' : 'width';
  if (!props[resizeBy]) throw new Error('either height or width have to be specified');

  const parsedHeight = parseDimension(props.height);
  const parsedWidth = parseDimension(props.width);
  const suffix = resizeBy == 'height' ? parsedHeight.suffix : parsedWidth.suffix;

  const renderedHeight = resizeBy == 'height' ? parsedHeight.value : props.resHeight / (props.resWidth / parsedWidth.value);
  const renderedWidth = resizeBy == 'width' ? parsedWidth.value : props.resWidth / (props.resHeight / parsedHeight.value);
  return (
    <div style={{ position: 'relative', height: `${renderedHeight}${suffix}`, width: `${renderedWidth}${suffix}` }}>
      <NextImage src={props.src} layout={'fill'} />
    </div>
  );
};

/**
 * parses a height/value into a object that is easier to handle
 * Examples:
 *  - 24 -> {value: 24, suffix: ''}
 *  - "24rem" -> {value: 24, suffix: 'rem'}
 * @param value the value to be parsed
 */
function parseDimension(value: number | string | undefined): { value: number; suffix: string } {
  if (value == undefined) return { value: 0, suffix: '' };
  if (typeof value == 'number') return { value, suffix: '' };

  let split = value.split(/(\d+)/).filter(el => el != ''); //should have format [number, string | undefined]
  if (split.length == 0) throw new Error('height/width cannot be 0');
  if (isNaN(Number(split[0]))) throw new Error('height/width have to begin with a number');
  if (split.length > 2) throw Error("width/height has to be a number or have the format '\\d+\\w*'");
  return { value: Number(split[0]), suffix: split[1] ?? '' };
}

It can be used like this

<div style={{ height: '24rem', width: '100%', display: 'flex', justifyContent: 'start' }}>
            <Image src="/images/b9eb0b22727b693b1ff8ac6c15ecb18994cf7e7680425e87ecbde543e62c0d21.png" height={'24rem'} resHeight={2160} resWidth={1800} />
            <Image src="/images/b9eb0b22727b693b1ff8ac6c15ecb18994cf7e7680425e87ecbde543e62c0d21.png" height={'24rem'} resHeight={2160} resWidth={1800} />
</div>

Edit: Sorry for editing this message so often

[gmcamposano]

At this point, i believe it is just more simple to use img than to use Image, even if it comes with some downsides. Every time I test components done with html / css, I cannot replicate them because of how Image works.

[voxvici]

At this point, i believe it is just more simple to use img than to use Image, even if it comes with some downsides. Every time I test components done with html / css, I cannot replicate them because of how Image works.

Exactly, you can get even better optimization with cdn and lazy loading

[leerob]

Sorry about this experience – we're actively working on improvements to next/image based on this feedback. We will be sharing more on this soon.

[cballenar]

Any news on this issue? I've been unable to find a way to display images of variable heights without ending up with letterboxes around my images. :\

In my case I'm pulling multiple images from markdown content and displaying them using layout="responsive" width="600" height="400" objectFit="contain" which results in the aforementioned letterboxes (added via css background color so at least it's not just white space).

[tumetus]

Is this of any help https://youtu.be/P7i5YIJRJew

[cballenar]

Thanks @tumetus , I saw it but I'm trying to avoid going that route. It's a fine hack but this sounds like the kind of feature we shouldn't need to resort to !importants to accomplish.

[leerob]

Edit: Next.js 13 introduces a new & improved Image component based on feedback like this!

http://nextjs.org/13

[cballenar]

I second @spirobel , I have not found a way to display remote images that way. In my case this is for images being referenced in markdown files and located in the /public folder. Since these can't be imported dynamically, they can't be treated as local images.

The solution I have found (but have not been able to implement/test yet) is to change to an MDX setup where each image is imported into the content and then used from there as a local image which should allow Next to detect width and height automatically and have the images adapt as needed (with the current version of Image). Granted... this is terrible in terms of keeping those MD files easy to read/write if every time you want to add an image you gotta first import it 🤷‍♂️.

I guess... the problem I see here is not being able to treat "remote" images with unknown/variable width and height as local images (taking full advantage of fill and other layouts) because they're not manually imported... Shouldn't there be a way to dynamically load images available at build time?

(Again... in my case, these are images already available anyway, I can see how this would be much more challenging if attempting to do so with images that are truly remote and may come from different sources... And/or depending on volume...)

[tettoffensive]

@cballenar Any progress displaying images being referenced in markdown files and located in the /public folder?

[JonasDoe]

I guess the changes make sense in some way. It seems like Image was less a universal drop-in replacement for <img> than a special-purpose element for images with fixed dimensions anyway. next/future/image makes that just more explicit, so I figure I can resume to <img> for most cases without much regret.

[drwilkins]

it's absurd that there's not an easier solution for maintaining aspect ratios with images that we don't know (or don't want to have to specify) the dimensions for. Documentation is incredible terse, without realworld examples with non-square dimensions.

[johncmunson]

IMO, next/image is somewhat of a black eye in the Next.js ecosystem. The new image component released with Next 13 did very little to address the concerns that people are actually bringing up in this thread.

[maupeon]

Hi everyone, is there a way to put the width of the parent and an auto height?
So it will be something like
<div className=" h-auto w-full relative "> <Image layout="fill" className="w-full h-full object-contain rounded-xl" alt="some random image" src={img} // objectFit="contain" /> </div>