Aspect Ratio

A container with a consistent width-to-height ratio.

In React, AspectRatio is a container that will always maintain the same width-to-height ratio. It will expand to fill as much width as possible.

Usage

AspectRatio exposes a single prop called ratio.

ratio can be calculated by dividing the content's height by its width.

e.g. 1) If your content is 16px wide and 9px tall, your ratio is 9 / 16 = 0.5625

e.g. 2) If your content is a square, your ratio is 1

Try tweaking the ratio prop and resizing the playground. Notice that the box always retains the same aspect ratio as the container changes size!

The preview has been updated.

Props

See core props for additional props that can be applied to each of these components. Each component also accepts the React-equivalent native HTML attributes of the element it renders, unless a listed prop replaces one or a note says otherwise.
AspectRatio
Renders <span>.
proptyperequireddefault
ratio
The height / width ratio expressed as the result of dividing the content's height by its width. e.g. 1) If your content is 16px wide and 9px tall, your ratio is 9 / 16 = 0.5625. e.g. 2) If your content is a square, your ratio is 1.
number
true
null
AspectRatioContainer
Renders <span>.
proptyperequireddefault
ratio
The height / width ratio expressed as the result of dividing the content's height by its width. e.g. 1) If your content is 16px wide and 9px tall, your ratio is 9 / 16 = 0.5625. e.g. 2) If your content is a square, your ratio is 1.
number
true
null
Other components
These components have no props beyond core props and native HTML attributes.
ComponentRendersNotes
AspectRatioContent<span>