Image Aspect Ratio Component?

[KonnorRogers]

I know that the aspect-ratio css is still a WIP and was curious if it would be worth the effort to have a component in the meantime:

To align with css property: <sl-image aspect-ratio="16/9">
To align with responsive-embed: <sl-image aspect-ratio="16:9">

I find myself looking to maintain aspect-ratios more and more on images. I know the <sl-responsive-embed> allows for aspect ratios but dont see it as being used anywhere else.

[claviska]

Wouldn't the logic and styles be pretty much the same? If so, maybe we should create the <sl-aspect-ratio> utility and make it support iframes, images...or even arbitrary containers.

It would look just like <sl-repsonsive-embed> except, instead of targeting specific elements, it would target ::slotted(*) so whatever element you slot in gets the correct aspect ratio. Could be an <img>, a <figure>, an <iframe>, or even a <div>.

This would replace the current component, which probably has too narrow of a scope. And once aspect-ratio has full browser support, we can deprecate the utility.

[KonnorRogers]

That sound 100% reasonable to me. 👍

[claviska]

Tracking this in #436.

[claviska]

Implemented as <sl-responsive-media> in 5c619b8.