AspectRatio renders a square by default, but its size can be customized with a ratio property. It supports any float value; however, it's easier to pass as a division of numbers, like 4 / 3. Since the component is a wrapper for other components - child content should have its height set to 100% or rendered as a background of the AspectRatio.
AspectRatio supports responsive syntax for its ratio property, which means you can change its ratio based on the viewport.
One of the most popular use-cases for AspectRatio is using it for media content, like images, videos, or maps.
This approach works well if combined with other components like Card.