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

[Timer]

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!

[Chukwu3meka]

any way to make height 100% in responsive