简体   繁体   中英

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.

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
}

Maybe a dumb issue to get caught on.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM