Search code examples
imagenext.jssizeminimum

nextjs minimum image size?


Going through NextJS documentation and the built in optimization is impressive. However, I can't seem to find any discussion on minimum width or height parameters.

NextJS - Image Docs

I could set both layout and objectfit to fill and have the parent div determine the height, but that's not as ideal as defining minimums for the image itself.

How would I go about setting a minimum height or width for an image using the built-in component?

Hopefully I'm just blind. Any thoughts would be appreciated.


Solution

  • I resolved the issue as follows - would be curious if there is a better solution so please comment if you disagree with the following:

    <div className={styles.imageDiv}>
      <Image src={localImage}
        height={50} // this doesn't set size, this is just for ratio
        width={50}
        layout='responsive'
        alt='image description'
      />
    </div>
    

    The CSS:

    .imageDiv {
      display: block;
      min-width: whatever you want;
      // this is also how you would set max-width
      // this method also allows height or width to be auto
    }