Add ratio breakpoint functionality

[aerni]

This PR implements issue #31.

You can now set different ratios for different breakpoints like so:

{{ responsive:image ratio="1/1" lg:ratio="16/9" 2xl:ratio="2/1" }}

Each breakpoint adds a source element with a media attribute containing a min-width media query. No longer do you have to hide/show images with CSS if you want to use different aspect ratios depending on screen size.

If you don't provide a default ratio, the image ratio falls back to the ratio of the original image.

{{ responsive:image lg:ratio="16/9" }}

This PR ended up in a much bigger refactor than I first anticipated. Please let me know what you think.

[aerni]

There's one drawback to note with this approach. As of now, it's not possible to set the width and height attributes on the individual source element, resulting in layout shifts for any breakpoint other than the default one. Adding these has been proposed but until then, this is currently a limitation of the solution.

[riasvdv]

Thanks a lot for all the work! I've merged your changes, but did a big refactor and added tests, so Github doesn't recognize the merge anymore.

[aerni]

Awesome and great refactor too! Excited about the new feature 🎉