next.js: next/image resize not working as expected
Bug report
Describe the bug
First of all thanks for all the efforts building up to the 10.0.0 release! đź’Ş
I’ve been experimenting with the next/image <Image /> component to do some auto optimisations for the images on my blog. Unfortunately I quickly ran into some resizing issues. When I resize my viewport to be smaller than the image I would expect the image to resize automatically to a smaller variation but it doesn’t.
To Reproduce
Unsure how to reproduce since it might be user error. I’m experimenting with some basic examples like:
<Image src="/avatar.png" alt="avatar" height={500} width={500} />
Expected behavior
I would expect the image to automatically resize to fit the viewport.
Screenshots
See a rather extreme example below.
System information
- OS: macOS
- Browser (if applies): chrome
- Version of Next.js: 10.0.0
- Version of Node.js: 14.5.0
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 8
- Comments: 22 (6 by maintainers)
Commits related to this issue
- docs: warning for Image responsive With the default Next.js template project, the .main and .container divs have `display: flex` style rule. However, as commented in (this issue)[https://github.com/... — committed to abotsi/next.js by abotsi 3 years ago
- docs: add note for Image responsive layout (#25915) With the default Next.js template project, the .main and .container divs have `display: flex` style rule. However, as commented in [this issue](htt... — committed to vercel/next.js by abotsi 3 years ago
- docs: add note for Image responsive layout (#25915) With the default Next.js template project, the .main and .container divs have `display: flex` style rule. However, as commented in [this issue](htt... — committed to blitz-js/next.js by abotsi 3 years ago
We’re currently working on adding a
layout="responsive"prop you can pass to NextImage! We’ll have it on canary for you to try soon!any way to make height 100% in responsive
Fix this issue by adding a class selector to the image container and set min-width to 100%
jsx
<div className={classes[''some-class']}><Image src='some-link' alt='' width={640} height={426} layout='responsive' /><div>css
.some-class{ min-width: 100% }that should fix it
Hi there, For people having problem of image disappearing with
layout="responsive"(like @chgara, @BrunoQuaresma, @KugelbergDK…), look at the parent element of your <Image />. It won’t work if it have style ruledisplay=flex. Hope it helps@racer161 is the image still hidden if you set
position: relativeon its parent container?I have the same problem as you. When I set layout=“responsive” and width={500} height={500} the image dissapears
Great! You’ll need to enforce a minimum width for the
responsivemode. I’ll close this as solved!Could you please try out
next@canary?@Timer Can’t seem to “enforce” a min width for the responsive mode to work. I referenced the example in docs but unable to make the image appear. The other layout types I tested works as expected (fill, intrinsic) ( https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-responsive.js
<Img quality={100} src={comment.imageUrl} layout="responsive" width={300} height={300} minWidth={300} />Also tried,
<Img quality={100} src={comment.imageUrl} layout="responsive" width={300} height={300} minWidth={300} />as well as, // stylesheet.module.scss
.image { min-width: 30rem !important; }<Img className={styles.image} quality={100} src={comment.imageUrl} layout="responsive" width={300} height={300} />Thanks in advance!