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.

CodePudding user response：

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
}