Aspect Ratio

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

UsageAPI

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!

ReactVanilla

<AspectRatio ratio={0.5}>
  <div
    style={{ height: '100%', width: '100%', backgroundColor: 'rebeccapurple' }}
  />
</AspectRatio>

<AspectRatio ratio={0.5}>
  <div
    style={{ height: '100%', width: '100%', backgroundColor: 'rebeccapurple' }}
  />
</AspectRatio>

<div class="swan-aspect-ratio-container" style="padding-bottom: 50%">
  <div class="swan-aspect-ratio-content">
    <div
      style="height: 100%; width: 100%; background-color: rebeccapurple"
    ></div>
  </div>
</div>

<div class="swan-aspect-ratio-container" style="padding-bottom: 50%">
  <div class="swan-aspect-ratio-content">
    <div
      style="height: 100%; width: 100%; background-color: rebeccapurple"
    ></div>
  </div>
</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!

Besides the below-mentioned props, all the other props are forwarded to the element specified in the as prop(default: <div/>)

What's under the hood?

<AspectRatioContainer {...props}>
  <AspectRatioContent>{children}</AspectRatioContent>
</AspectRatioContainer>

<AspectRatioContainer {...props}>
  <AspectRatioContent>{children}</AspectRatioContent>
</AspectRatioContainer>

Props

AspectRatio

This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
ratio	`number`	true	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.	null

AspectRatioContainer

See core props for additional props that can be applied to this component.

prop	type	required	description	default
ratio	`number`	true	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.	null

AspectRatioContent

See core props for additional props that can be applied to this component.

Was this page useful?

Published: Jan 31, 2022Last updated: Sep 3, 2024

Anchor Bar

Avatar