Support different aspect ratios for different screen sizes

[LeeKrane]

In my current project I need the ability to change the aspect ratio of an image, depending on the current screen size (for responsive design). I know that you can define the aspect ratio of an image by setting an explicit width and height (if you use sizes, then it is responsive):

<NuxtImg ... fit="crop" width="750px" height="375px" sizes="480px xs:550px sm:750px" />

(Using TailwindCSS)
My problem here is, that I need different aspect ratios once I hit "md" and "2xl" screen sizes. I currently solve this by using 2 more NuxtImg components, where the 2 NuxtImgs with the wrong aspect ratio for the current screen width will be hidden via display: hidden.

My idea would be to add some kind of aspect property like aspect="2/1 md:3/5" or to integrate it into the sizes property kind of like sizes="480px/240px md:450px/750px" (which would probably be a better idea) or something like that. I don't know how that could conflict with the existing height property, but if this feature could somehow work it would be really neat.

[bernhardberger]

Art direction should be done with <picture> tag, not with an <img srcset.

If the browser downloads a bigger image from the srcset for whatever reason (e.g. you turn your device or make your browser windows smaller) it won't download a lower quality image to replace it on the fly.