How to use Image component in Next.js with unknown width and height

Question

Since version 10, Next.js comes with the built-in Image component which provides the feature of image optimization and resizing image responsively. I like it a lot and I've been using it across my website for images with a fixed size. According to the official documentation, width and height are required props unless it's for layout=fill.

Now, I would like to use Image component even when I don't know width and height ahead of time. I have blog resources that come from a CMS where the exact size of the image is unknown. In this case, is there any way I could use Image component?

Any help would be appreciated.

Answer 1

Yeah, you could use it with the layout=fill option you mentioned.

On this case, you're gonna need to set an "aspect ratio" for your images

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

You can use objectFit="cover" too and it'll scale your image up to fill all the container.

The downside of this approach is that is gonna be attached to the width you specify, it could be relative such as "100%" or absolute e.g. "10rem", but there's no way to set like an auto width and height based on the size of your image, or at least no yet.

Answer 2

I had the same issue too: I wanted to use Image from next/image in a masonry ImageList from MUI...

Anyway, this is the trick I used to get the size of my image and so to handle the size of the container:

    import React, { FC, useState } from 'react';
    import styled from 'styled-components';
    import Image from 'next/image';
    
    interface Props {
      src: string;
    }
    export const MasonryItem: FC<Props> = ({ src }) => {
      const [paddingTop, setPaddingTop] = useState('0');
    
      return (
        <Container style={{ paddingTop }}>
          <Image
            src={src}
            layout="fill"
            objectFit="contain"
            onLoad={({ target }) => {
              const { naturalWidth, naturalHeight } = target as HTMLImageElement;
              setPaddingTop(`calc(100% / (${naturalWidth} / ${naturalHeight})`);
            }}
          />
        </Container>
      );
    };
    
    const Container = styled.div`
      position: relative;
    `;

The idea: get size of image when it's loaded, calc the ratio and use it to make the container fill the require space with padding-top. This way no matter your image size the container will be fit to it.

Remark, I didn't use width or height on the container because I didn't need it with my project, but maybe you will have to set one of both for your project.

As I'm still beginning with React & NextJS & typescript, maybe the solution can be prettier, if someone have an idea to improve it I'll be pleased to read it!

Answer 3

If you want to preserve the ratio of the original image you can do it like this:

<div
  style={{
    width: 150,
    height: 75,
    position: "relative",
  }}>
<Image
  src={"/images/logos/" + merger.companyLogoUrl}
  alt={merger.company}
  layout="fill"
  objectFit="contain"
/>

The image will fill to be as big as the container allows. So if you know your images are wider than they are long, for example, you could just set the width on the container and then set the container height to be bigger than the predicted image height.

So, for example, if you're working with wide images you can set the container width to be 150px, then as long as the container height is larger than the image height the image will show up at the height of the original ratio.

Answer 4

nothing wasn't helped me from above variants, but i tried resolve issue another way, it works for me:

const [imageSize, setSmageSize] = useState({
  width: 1,
  height: 1
 });
    
<Image
  src={imgPath}
  layout="responsive"
  objectFit="contain"
  alt={alt}
  priority={true}
  onLoadingComplete={target => {
    setSmageSize({
      width: target.naturalWidth,
      height: target.naturalHeight
    });
   }}
  width={imageSize.width}
  height={imageSize.height}
/>

Answer 5

I wrote a blog post, detailing how to get the size of remote images, while also using SSG. How to use Image component in Next.js with unknown width and height

import Image from "next/image";
import probe from "probe-image-size";

export const getStaticProps = async () => {
  const images = [
    { url: "https://i.imgur.com/uCxsmmg.png" },
    { url: "https://i.imgur.com/r4IgKkX.jpeg" },
    { url: "https://i.imgur.com/dAyge0Y.jpeg" }
  ];

  const imagesWithSizes = await Promise.all(
    images.map(async (image) => {
      const imageWithSize = image;
      imageWithSize.size = await probe(image.url);

      return imageWithSize;
    })
  );

  return {
    props: {
      images: imagesWithSizes
    }
  };
};
//...
export default function IndexPage({ images }) {
  return (
    <>
      {images?.map((image) => (
        <Image
          key={image.url}
          src={image.url}
          width={image.size.width}
          height={image.size.height}
        />
      ))}
    </>
  );
}
 

Answer 6

Sometimes you want to have different image sizes, like small, medium, and large. We pass a prop to the component and based on this prop, we use different styling. In this case, layout="fill" is handy.

when fill, the image will stretch both width and height to the dimensions of the parent element, provided the element is relative

const Card = (props) => {
  const { imgUrl, size } = props;
  const classMap = {
    large: styles.lgItem,
    medium: styles.mdItem,
    small: styles.smItem,
  };
  return (
      <div className={classMap[size]}>
        <Image src={imgUrl} alt="image" layout="fill" />
      </div>
  );
};

You write css styling for each case. Important thing is you should have position:relative. for example:

.smItem {
  position: relative;
  width: 300px;
  min-width: 300px;
  height: 170px;
  min-height: 170px;
}

.mdItem {
  position: relative;
  width: 158px;
  min-width: 158px;
  height: 280px;
  min-height: 280px;
}

.lgItem {
  position: relative;
  width: 218px;
  min-width: 218px;
  height: 434px;
  min-height: 434px;
}

Answer 7

In most cases, you want to use an image while keeping the aspect ratio and setting the custom width property. Here is a solution I found. You have to use statically imported images in the next project. In the below code, I used tailwindCSS for styling.

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

import mintHeroImg from '../public/images/mint-hero.png';

export default function Lic() {
  return (
    <div className="w-[100px] relative">
      <Image src={mintHeroImg} alt="mint-hero" />
    </div>
  );
}

This will render an image with the width as 100px and the height is determined by the image ratio. The relative position is the essential property.

Answer 8

@Oleskii the answer you gave helped me to come up with the following:

My goal is to fit any image, regardless of sizing, within a square container without adjusting the perceived aspect ratio of the image

onLoadingComplete={(target: any) => {
   const aspectRatio = target.naturalWidth / target.naturalHeight
      if (target.naturalHeight > target.naturalWidth) {
        setImageSize({
          height: containerWidth / 2,
          width: containerWidth / 2 * aspectRatio
        })
      } else {
        setImageSize({
          width: target.naturalWidth,
          height: target.naturalHeight,
       });
      }
    }}

Answer 9

Here is my solution which fits the parent container. Also takes care of whether the image is vertical or horizontal. The width is dynamically set.

Make sure you change your max-height though!

import { StaticImageData } from "next/image";
import Image from "next/image";
import styled from "styled-components";

interface Props {
    image: StaticImageData;
    altText: string;
}

const ImageDisplay = ({ image, altText }: Props) => {
    return (
        <ImageContainer image={image}>
            {image.width > image.height ? (
                <Image src={image} className={"imgHorizontal"} alt={altText} />
            ) : (
                <Image src={image} className={"imgVertical"} alt={altText} />
            )}
        </ImageContainer>
    );
};

const ImageContainer = styled.div<{ image: StaticImageData }>`
    display: flex;
    justify-content: center;

    width: 100%;
    max-height: 1000px;
    ${(props) => props.image.width < props.image.height && `height: ${props.image.height}px;`}

    .imgVertical {
        object-fit: contain;
        width: auto;
        height: 100%;
    }

    .imgHorizontal {
        object-fit: contain;
        width: 100%;
        height: auto;
    }
`;
export default ImageDisplay;

Answer 10

I've run into the problem many times where I want an image to scale proportionally to fill the width of the screen. In this case you know you want width: 100% and it seems like height: auto would automatically scale but this doesn't work. The key is that you need to set the proper aspect-ratio for the image you're using. You can do this in CSS. For example:

<div 
  style={{
    position: "relative",
    width: "100%",
    aspect-ratio: 16/9     
  }}
>
  <Image 
    src="/path/to/image.png"          
    layout="fill"          
  />
</div>   

Note that if you set aspect-ratio wrong for the image then it wont fill the width or height as expected.

Answer 11

For Next 12 and tailwind css.

Here is what I have for auto height and width scaled to 100% of the parent div:

<div>
  <Image 
  sizes="(max-width: 100%)" 
  src={srcImageImport} 
  alt="My Image" />
</div>

Answer 12

<Image src={thumbnail || ""}
       alt="post-thumbnail"
       layout="responsive"
       objectFit="cover"
       width={6}
       height={4}
/>

width={6} height={4} is ratio
Ex: square => width={1} height={1}