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

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;
}
cssimagenext.js


Solution 1:[1]

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

.wrapper img {
  width: auto;
  height: 100px;
  object-fit: contain;
}
import Image from "next/image";

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

Solution 2:[2]

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

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

Solution 3:[3]

I can't find a way to get what you want using the NextJS image component. Here is a vanilla CSS method if you're able to implement this instead:

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

.img-wrapper {
  display: grid;
  place-content: center;
  height: 100px;
  overflow: hidden;
}

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Parham Abolghasemi
Solution 2 Ali Klein
Solution 3

Related Questions