Set height with sizes attribute

[wokalek]

Usecase: you have long image (width > height) and you need square to thumbnail, eg:

You cant do object: cover, because settings sizes="'xs:72px sm:102px md:114px lg:138px xl:160px xxl:184px 2xl:552px'" do this:

---

It's blurry and not 138x138.
But if you specified fit="cover", it doesn't help, because getSizes receives already counted 138x82 as width/height

So, what if you can provide height in sizes property xs:72x72 sm:102x102 md:114x114 lg:138x138 xl:160x160 xl:184x184 2xl:552x552?

And with this fit modifier will work!

[OhB00]

Workaround:

const img = useImage()
const sizes = img.getSizes("/i/splash.jpg", { sizes: "500px sm:600px md:800px lg:1200px", modifiers: { quaility: 100 } })
const srcset = sizes.srcset.replace(/w_\d+/g, match => match.replace('w_', 'h_'))

Remove sizes and use srcset on your NuxtImg