The sizes prop is not displaying correctly according to the documentation

[clairechang0609]

According to the issue #1331 and the documentation:

This default size is used up until the next specified screen width, and so on. Each specified size pair applies up - so md:400px means that the image will be sized 400px on md screens and up.

This means If we define:

sizes="100vw sm:50vw md:400px"

the output should be sizes="100vw, (min-width: 640px) 50vw, (min-width: 768px) 400px". However, the actual output is:

sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 400px"

This indicates that when the screen width is 768px, the image width shows 50vw instead of 400px.

---

Here's the example: stackblitz

[stijns96]

Hi @clairechang0609,

The browser is reading the conditions from left to right. That means that the first condition (without any min-with) will always pass the browsers test. So it will always be the 100vw.

Working with min-width sizes="(min-width: 768px) 400px, (min-width: 640px) 50vw, 100vw"

This is what it would look like. When working with min-width the most right value will be the fallback for everything that is below 640px.

Please check read this article for more information

[Baroshem]

Closing as the solution was provided in the comment. Thanks @stijns96 :)