nuxt
Support different aspect ratios for different screen sizes
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.
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.
What would be helpful is to add ratio for cropping: <NuxtImg src="/demo.jpg" width="500" ratio="9:16" />
https://cloudinary.com/documentation/transformation_reference#ar_aspect_ratio
I opened a new issue for adding ratio prop: #1448
It also contains a possible solution on how multiple aspect ratios per screen size could be defined, either by setting explicit values:
<NuxtImg sizes="200x100px md:300x150 lg:600x300" fit="crop" />
OR by adding a new ratios prop:
<NuxtImg sizes="200px md:300px lg:600px" ratios="2/1 md:3/2 lg:1" fit="crop" />
