Aspect 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.
Playground
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!
Components
AspectRatioContainer
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | required | The height / width ratio expressed as the result of dividing the content's height by its width Examples: 16:9 => 9 / 16 => 0.5625 1:1 => 1 / 1 => 1.0 3:4 => 4 / 3 => 1.3333 |
All other props are forwarded to the element specified in thecomponentprop(default: <div/>)
AspectRatioContent
AspectRatioContent has no props of its own
All props are forwarded to the element specified in thecomponentprop(default: <div/>)
Convenience Components
The following components are provided as a convenience for the most common use-cases.
Each Convenience Component is simply created by combining basic components together, so if you find that the Convenience Component isn't exactly what you need, you can easily compose your own version!
AspectRatio
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | required | The height / width ratio expressed as the result of dividing the content's height by its width Examples: 16:9 => 9 / 16 => 0.5625 1:1 => 1 / 1 => 1.0 3:4 => 4 / 3 => 1.3333 |
All other props are forwarded to the element specified in thecomponentprop(default: <div/>)
What's Under the Hood?
<AspectRatioContainer {...props}><AspectRatioContent>{children}</AspectRatioContent></AspectRatioContainer>