next/image not working as expected with fill and no height on parent

[RoyalFoxy]

Summary

I want to basically have an image of which the width, height and aspect ratio are unknown, to fit a parent container completely and keep it's aspect ratio. I couldn't find any documentation that helped me solve this problem.

Below you can see a simple wrapper Component that would be reusable and of which I thought would work. I hope it's even possible at this point.

I know there is the trick of doing some padding for the top but this has the same effect as just setting a height on the div and setting the objectPosition to be bottom. The height/paddingTop would need to match the images height exactly and if I know the height to begin with I didn't have this problem.

Setting the height on the div to auto or 100% doesn't work either.

import Image from "next/image";

interface ImageWrapper {
  src: string;
  alt: string;
}

export default function ImageWrapper({ src, alt }: ImageWrapper) {
  return (
    <div style={{ position: "relative", width: "100%" }}>
      <Image
        src={src}
        alt={alt}
        fill
        style={{objectFit: "contain"}}
      />
    </div>
  );
}

Additional information

next info output:

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.0.0: Fri Jun 30 17:50:16 PDT 2023; root:xnu-10002.0.168.505.3~1/RELEASE_ARM64_T6020
    Binaries:
      Node: 20.4.0
      npm: 9.7.2
      Yarn: N/A
      pnpm: 8.6.7
    Relevant Packages:
      next: 13.4.11-canary.2
      eslint-config-next: 13.4.9
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Example

https://stackblitz.com/edit/nextjs-emz9yh?file=app%2Fpage.jsx

[LimSB-dev]

If fill is used, it takes up the entire size of the parent tag, but the width of the "ImageWrapper" is 100%, which may differ from the original width of the image, and the height seems to be set to zero and is not visible.

import Image from 'next/image';

export default function ImageWrapper({ src, alt }) {
  return (
    <div style={{ width: '600px', height: '400px', position: 'relative' }}>
      <Image src={src} alt={alt} fill quality={100} />
    </div>
  );
}

[RoyalFoxy]

I think I wasn't clear on what I really would like to have. I don't want to have set values for the width nor height but dynamic ones. I want the image to be responsive and still get the boost of next/image over a normal img tag. I doubt this is even possible at this point but I the performance gain over a normal img tag is impressive if I would use paddingTop to try what a decrease in loading time it actually has...

[Night3y3]

facing the same issue got any solution mate?, using fill but nothing gets displayed

<div className={`relative w-full ${heightClass} ${className}`}>
            <Carousel className="w-full h-full">
                <CarouselContent className="h-full">
                    {items.map((item, idx) => (
                        <CarouselItem key={idx} className="h-full">
                            <div className="relative w-full h-full overflow-hidden rounded-md bg-muted">
                                {item.type === "image" ? (
                                    <div className="relative w-full h-full">
                                        <Image
                                            src={item.src}
                                            alt={`Showcase media image ${idx + 1}`}
                                            fill
                                            style={{ objectFit: 'contain' }}
                                            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                                            unoptimized={true}
                                            onError={(e) => {
                                                const target = e.currentTarget;
                                                const parent = target.parentElement;
                                                if (parent) {
                                                    parent.innerHTML = `
                                                        <div class="absolute inset-0 flex items-center justify-center text-xs text-muted-foreground bg-muted/80 rounded-md">
                                                            <span>Failed to load image</span>
                                                        </div>
                                                    `;
                                                }
                                            }}
                                        />
                                    </div>
                                ) : (
                                    <video
                                        src={item.src}
                                        className="w-full h-full object-cover rounded-md"
                                        controls
                                        preload="metadata"
                                    >
                                        <source src={item.src} type="video/mp4" />
                                        Your browser does not support the video tag.
                                    </video>
                                )}
                            </div>
                        </CarouselItem>
                    ))}
                </CarouselContent>
                {items.length > 1 && (
                    <>
                        <CarouselPrevious className="left-2" />
                        <CarouselNext className="right-2" />
                    </>
                )}
            </Carousel>
        </div>

[RoyalFoxy]

Note that you commented on a very old thread I had no idea existed anymore until you commented. I have since not worked with Next and React anymore and switched to other frameworks and methods of displaying images that are usually superior.

Seeing that you pass the unoptimized flag to the Image why are you not just using a normal img tag then if you dont use the optimization of the Image tag?

Also some other things to consider that dont have to do much with your issue. When using codeblocks on github you can make them be highlighted by adding the name of the language used – in this case jsx and tsx work

<div className={`relative w-full ${heightClass} ${className}`}>
    <Carousel className="w-full h-full">
        <CarouselContent className="h-full">
            {items.map((item, idx) => (
                <CarouselItem key={idx} className="h-full">
                    <div className="relative w-full h-full overflow-hidden rounded-md bg-muted">
                        {item.type === "image" ? (
                            <div className="relative w-full h-full">
                                <Image
                                    src={item.src}
                                    alt={`Showcase media image ${idx + 1}`}
                                    fill
                                    style={{ objectFit: 'contain' }}
                                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                                    unoptimized={true}
                                    onError={(e) => {
                                        const target = e.currentTarget;
                                        const parent = target.parentElement;
                                        if (parent) {
                                            parent.innerHTML = `
                                                <div class="absolute inset-0 flex items-center justify-center text-xs text-muted-foreground bg-muted/80 rounded-md">
                                                    <span>Failed to load image</span>
                                                </div>
                                            `;
                                        }
                                    }}
                                />
                            </div>
                        ) : (
                            <video
                                src={item.src}
                                className="w-full h-full object-cover rounded-md"
                                controls
                                preload="metadata"
                            >
                                <source src={item.src} type="video/mp4" />
                                Your browser does not support the video tag.
                            </video>
                        )}
                    </div>
                </CarouselItem>
            ))}
        </CarouselContent>
        {items.length > 1 && (
            <>
                <CarouselPrevious className="left-2" />
                <CarouselNext className="right-2" />
            </>
        )}
    </Carousel>
</div>

Another thing I'd suggest you do with your code tho is extracting the error handler to its own function and not setting the innerHtml of the parent but instead have a variable that stores the error you want to show and conditionally show it if it's set. Then it's easier to get rid of the error too by just setting said veriable to null again.

Also why are you using the sizes attribute without srcset? As far as I know sizes alone doesn't do anything.

Try to not mix the styles with tailwind classes. Instead of style={{ objectFit: 'contain' }} you should do classes="object-contain" – if possible always use tailwind classes, otherwise why use tailwind to begin with.