Bug in NuxtImg sizes configuration: Incorrect default size assignment about image HOT 4 CLOSED

This is expected behaviour. Like tailwind responsive prefixes, the 'default' value applies to all configurations, then sm: and md: specify behaviour for small (and up) and medium (and up).

See #977.

from image.

Either you didn't understand me, or I don't even know.
It's written in the documentation.

If you omit a screen size prefix (like sm:) then this size is the 'default' size of the image. Otherwise, Nuxt will pick the smallest size as the default size of the image.
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.

That is, it is planned that for such a configuration
100vw sm:50vw md:400px

100vw will be for everyone, sm:50vw - the sm prefix for 50vw, md:400px - the md prefix for 400px

in HTML, it should look something like
(max-width: sm) 50vw, (max-width: md) 400px, 100vw

but in fact, the pairs are created not through ":", but through a space, and are separated by ":".
and the result we have is
(max-width: sm) 100vw, (max-width: md) 50vw, 400px

I tested many times, check it yourself. Either the documentation is incorrect, or the logic

from image.

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 that for the following configuration:

100vw sm:50vw md:400px

the output should be (min-width: sm) 50vw, (min-width: md) 400px, 100vw

The key phrases are 'up until' and 'and up'. If you think the docs are unclear, I would love to hear your suggestions for improving them. 🙏

from image.

Sorry, my English isn't good enough, and translators sometimes lose context. I only now understood what you were talking about.
Perhaps if you added to this phrase "Each specified size pair applies up - so md:400px means that the image will be sized 400px on md screens and up." something like "on screens smaller than md, 100vw will be used", it would have been clearer to me.

Thank you for clarifying.

from image.