Feature request: Aspect ratio

Some providers, like Storyblok, automatically crop their images if width and height is supplied. E.g. if my image is 600x600 and I set width="600" height="300" it will automatically crop the image. This even works with focus points and facial regonition.

Unfortunately it is currently not possible to do so for multiple screen sizes with the use of sizes prop. It kinda works by setting the following:

<NuxtImg
      sizes="200px md:300px lg:600px"
      width="2"
      height="1"
      fit="crop"

This would render on mobile 200x100 and on desktop 600x300, BUT the img width and height props are still set to 2 and 1.

Possible solutions::

• Define an aspect ratio with a new ratio prop: <NuxtImg sizes="200px md:300px lg:600px" :ratio="2/1" fit="crop" />
• OR allow sizes to accept heights as well, e.g.: <NuxtImg sizes="200x100px md:300x150 lg:600x300" fit="crop" />

Further there is this issue #1466 requesting different aspect rations depending on the current screen size. If sizes allows for height it would support this, too. Otherwise, when adding ratio prop, also a ratios prop could be added to accept multiple ratios:

• <NuxtImg sizes="200px md:300px lg:600px" ratios="2/1 md:3/2 lg:1" fit="crop" />

Start by tracing how NuxtImg handles the sizes, width, height, and fit props. Compare the proposed ratio and height-aware sizes APIs with the related responsive-ratio request in issue #1466; done means responsive cropped images expose matching dimensions at each breakpoint through a chosen, documented API.