How to size images by height and auto width with NextJS Image Component

Question

I have images that I would like to have a fixed pixel height and auto width with object-fit: contain.

How does one achieve this behavior with NextJS Image Component? I'd like to avoid layout="fill" as I would like the intrinsic width of the image (width: auto).

.wrapper {
  display:flex;
  flex-wrap: wrap;
}

.wrapper img {
  width: auto;
  height: 100px;
  object-fit: contain;
}

<div class="wrapper">
  <img src="https://picsum.photos/id/237/200/300"/>
  <img src="https://picsum.photos/id/236/300/300"/>
  <img src="https://picsum.photos/id/238/300/100"/>
  <img src="https://picsum.photos/id/239/250/275"/>
  <img src="https://picsum.photos/id/240/400/100"/>
  <img src="https://picsum.photos/id/241/300/300"/>
<div/>

The following does NOT work as the above with NextJS Image component:

  <div className="wrapper">
     <div className="image-wrapper">
        <Image
          layout="responsive"
          width={image.width}
          height={image.height}
          src={image.src}
          objectFit="contain"
         />
     <div/>
     <div className="image-wrapper">
        <Image
          layout="responsive"
          width={image.width}
          height={image.height}
          src={image.src}
          objectFit="contain"
         />
     <div/>
  </div>


.wrapper {
  display:flex;
  flex-wrap: wrap;
}

.image-wrapper {
  width: auto;
  height: 100px;
}

I think you should swap your snippet out for the NextJS image setup you have — Zach Jensz, Apr 07 '22 at 01:08
If I can achieve the intrinsic width with `layout="fill", then that would be fine. I don't see a way of making that happen though. — Ali Klein, Apr 07 '22 at 01:13
It seems like what you want isn't implemented yet: https://stackoverflow.com/questions/66353475/how-to-use-image-component-in-next-js-with-unknown-width-and-height — Zach Jensz, Apr 07 '22 at 01:16

Ali Klein · Accepted Answer · 2022-10-07T19:52:31.640

NextJS Image Component experimental support for "Raw" layout provided me with what I needed to achieve this.

UPDATE: Experimental Raw layout is now next/future/image

https://github.com/vercel/next.js/issues/35493

.wrapper {
  display:flex;
  flex-wrap: wrap;
}

.img-wrapper {
  height: 100px;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.max-w-none {
  max-width: none;
}

.object-contain {
  object-fit: contain;
}

<div className="wrapper">
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
   <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
  <div className="img-wrapper">
   <Image
      className="h-full w-auto max-w-none object-contain"
      alt={logo?.ariaLabel}
      src={src}
      layout="raw"
      width={width}
      height={height}
    />
  </div>
<div/>

This answer is now obsolete with the raw feature being moved to a new module `next/future/image`. Please consider updating it. — sayandcode, Oct 06 '22 at 04:46

How to size images by height and auto width with NextJS Image Component

1 Answers1