Allow for multiple aspect-ratios on different breakpoints

[RHellenes]

I couldn't find anything about this in the documentation, but please direct me to it if its already supported.

Enviroment:

"devDependencies": {
    "@nuxt/image-edge": "1.0.0-27968280.9739e4d",
    "nuxt": "^3.2.3"
  }

---

Request explanation:

I want the possibility to get different aspect ratios on different breakpoints (eg. 1/1 on 400w, 1/2 on 1200w). As of now I've only managed fetch scaled versions of the original aspect ratio.

Desired output

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300">
  <img src="https://via.placeholder.com/1500x300" width="1500" height="300">
</picture>

According to this issue this is supported is supported on major browsers (on chrome since v90, Safari since v15 and Firefox since v105)

Notice that each <source> has its own width and height attribute

For guick reference:

This is the output (without trying to get multiple aspect ratios) on the official codesandbox playground

<picture>
  <source
    type="image/webp"
    srcset="
      /_ipx/f_webp,s_200x133/images/mountains.jpg   200w,
      /_ipx/f_webp,s_500x333/images/mountains.jpg   500w,
      /_ipx/f_webp,s_1024x683/images/mountains.jpg 1024w
    "
    sizes="(max-width: 320px) 200px, (max-width: 768px) 500px, 1024px" 
  />
  <img
    src="/_ipx/f_jpeg,s_1024x683/images/mountains.jpg"
    srcset="
      /_ipx/f_jpeg,s_200x133/images/mountains.jpg   200w,
      /_ipx/f_jpeg,s_500x333/images/mountains.jpg   500w,
      /_ipx/f_jpeg,s_1024x683/images/mountains.jpg 1024w
    "
    sizes="(max-width: 320px) 200px, (max-width: 768px) 500px, 1024px"
    width="3750"
    height="2500"
  />
</picture>