Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

aspect-ratio not supported

See original GitHub issue


Passing aspectRatio into layout components isn’t recognized, it only works when passing it into the sx prop.

Link to Reproduction

Steps to reproduce

  1. The red box has aspectRatio={'1'} passed directly into it, but it does not show up as aspect-ratio: 1; in the rendered page.
  2. The blue box has aspectRatio={'1'} passed through the sx prop and it renders as expected.

Chakra UI Version



Brave Version 1.27.108

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:4
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

TimKolbergercommented, Aug 5, 2021

Thanks for bringing this up @ngregrichardson!

We support the most common CSS properties as component props. A CSS property which refers to a token in the theme makes sense to provide them as a component prop, but the aspect-ratio is a rarely used (imo) one and can be achieved with our <AspectRatio /> component.

Let’s see if this issue gets a few upvotes or the stale does it’s job and closes this feature request.

isaachinmancommented, May 31, 2022

I’d love to see aspect-ratio supported, as it has good browser support and achieves what the AspectRatio component does in one line, plus works flawlessly with flex layouts.

Please let me know if a PR would be accepted.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Maintain Aspect Ratio not working - Stack Overflow
CSS has a property for this .square { aspect-ratio: 1 / 1; width: 100px; background: grey; padding: 10px; color: white; }
Read more >
If you've encountered an error message stating ASPECT_RATIO_NOT_ALLOWED, this error occurs when at least one of your logo images does not successfully crop ......
Read more >
CSS property: aspect-ratio | Can I use... Support ... - CanIUse
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and...
Read more >
aspect-ratio - CSS-Tricks
The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated ...
Read more >
Aspect ratios supported by placements in Meta Ads Manager
1.91:1 16:9 1:1 4:5 Facebook Feed ✓ ✓ ✓. Recommended for images ✓. Recommended f... Instagram Feed and Explore ✓ ✓ ✓. Recommended for images...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found