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

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

CodePudding user response：

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

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

import Image from "next/image";

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

CodePudding user response：

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 >
  <div >
    <img src="https://picsum.photos/id/237/200/300" />
  </div>
  <div >
    <img src="https://picsum.photos/id/236/300/300" />
  </div>
  <div >
    <img src="https://picsum.photos/id/238/300/100" />
  </div>
  <div >
    <img src="https://picsum.photos/id/239/250/275" />
  </div>
  <div >
    <img src="https://picsum.photos/id/240/400/100" />
  </div>
  <div >
    <img src="https://picsum.photos/id/241/300/300" />
  </div>
</div>