Aspect Ratio

Aspect ratio is a utility for defining element's size proportions.
Supports any custom ratio value


Usage

By default, AspectRatio gets displayed as a square but its size can be customized with a ratio property. It supports numerical values by it's easier to pass it 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.

One of the most popular use-cases for AspectRatio is using it for media content, like images, videos or maps.

This approach works really well if combined with other elements and/or layout component, like Card.

Properties

NameTypeDefaultRequiredComment
rationumber-falseWidth to height proportions
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element