Responsiveness of Aspect and AspectImage components

[lhguerra]

I'm currently implementing a news list with an image in each item, and these images have 4:3 ratio in mobile devices and 16:9 ratio in desktop devices. Would it be possible or even make sense for the Aspect and AspectImage components to handle this kind of thing? I imagine an API like this:

<AspectImage {...imageProps} ratio={[4/3, 16/9]} />

Where each item in this array of ratios would be a definition of a breakpoint, exactly like responsiveness is handled in the sx property.

[fcisio]

Hey @lhguerra Personally, I don't use these components. I am watching the upcoming aspect-ratio CSS property, and when it is supported we'll potentially get rid of these components in favor of a simple aspect ratio scale linked to the property.

In the meantime, you can take a look at this comment where I have a snippet for this use case

[lachlanjc]

Yeah, these components are definitely heading in the legacy direction with aspect-ratio being supported in all modern browsers. https://caniuse.com/mdn-css_properties_aspect-ratio

[lachlanjc]

We are not planning to implement this, since the aspectRatio CSS property can be used with an array for responsiveness. Would welcome a PR if anyone cares strongly. Thank you!