如何使用 NextJS 图像组件按高度和自动宽度调整图像大小

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

Answer 1

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