0

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;
}
Ali Klein
  • 1,440
  • 10
  • 10

3 Answers3

0

.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/>
Parham Abolghasemi
  • 34
  • 1
  • 6
0

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/>
Ali Klein
  • 1,440
  • 10
  • 10
-1

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>
Zach Jensz
  • 2,608
  • 3
  • 8
  • 23
  • This is not what I'm looking for. I would like the widths to be auto (the intrinsic width) but the heights to only be fixed width. My snippet demonstrates exactly what I want but with NextJS Image Component. – Ali Klein Apr 07 '22 at 00:54
  • @AliKlein Yea I read the question again and noticed that, is it what you want now? – Zach Jensz Apr 07 '22 at 00:55
  • No, I am looking to use the NextJS Image Component, not the native `img` tag. Thanks, though. – Ali Klein Apr 07 '22 at 00:56
  • @AliKlein I think this should work for the NextJS Image Component, why did you provide an example with the native img tags? – Zach Jensz Apr 07 '22 at 00:58
  • My example is what I want to achieve but WITH NextJS Image Component. Unfortunately, your solution does not work with NextJS Image Component. – Ali Klein Apr 07 '22 at 01:05