Support voor calculated values

[stijns96]

I want to be able to pass calcs to the sizes attribute.

Example
sizes="100vw md:calc(100vw - 40px) 2xl:636px"

Looks like this is not possible at the moment, while this is possible on the native img element.

[Baroshem]

Hey there,

Would you be able to contribute with that change? 🙏

[stijns96]

Hi @Baroshem,

https://github.com/stijns96/image/tree/feat/sizes-calc-support

Currently trying to fix it.

[stijns96]

Hi @Baroshem,

I think I mentioned this already somewhere, but all screens are set to their absolute values and transformed to a max-width.

Example
100vw md:50vw -> (max-width: 768px) 100vw, 50vw

md: in tailwind is transformed to (min-width: 768px). That means that exactly 1px is overlapping. Nuxt IMG should be transform to 768 - 1 so the max width is 767.

Is there a reason why it is like this? I'm also not really sure why we don't just use (min-width). Images are a pain in the ass, but using max-width makes it even harder.

Let me know! I think it would be much beter to maybe even do a bigger refactor where a couple of issues are fixed al together. Because to be honest, even after adding this fix, I would still not use Nuxt Image because of these behaviours.

Related
#1413
#1433

100vw md:50vw should be (min-width: 768px) 50vw, 100vw. To me this would work so much better and is also more inline with mobile first design and development