Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsiveness of Aspect and AspectImage components #1863

Open
lhguerra opened this issue Jul 13, 2021 · 2 comments
Open

Responsiveness of Aspect and AspectImage components #1863

lhguerra opened this issue Jul 13, 2021 · 2 comments
Labels
enhancement good first issue help wanted @theme-ui/components

Comments

@lhguerra
Copy link

@lhguerra lhguerra commented Jul 13, 2021 •
edited

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
Copy link
Collaborator

@fcisio fcisio commented Jul 28, 2021

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 lachlanjc added @theme-ui/components enhancement good first issue help wanted labels Aug 2, 2021
@lachlanjc
Copy link
Member

@lachlanjc lachlanjc commented Oct 28, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement good first issue help wanted @theme-ui/components
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lhguerra @lachlanjc @fcisio