Aspect ratio

Supports any custom ratio values
Supports responsive aspect ratio behavior
Similar components:
Image


Usage

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.

Properties

Name
Type
ratio
number
children
React.ReactNode
className
Array<
string
undefined
null
false
>
attributes
object
Previous