The Aspect Ratio layout component dynamically modifies the height of an element based on its
current width to match a width-to-height ratio. For example, a 4:3 ratio would make
an element with a width of 400px have a height of 300px. This updates in real time
when you resize the screen.
Aspect Ratio must contain exactly one child element. The child element should be sized
fully to the Aspect Ratio bounding box so that it resizes correctly. One way of achieving
this is using an absolutely positioned Box primitive.
Be considerate of smaller devices when using this component. If necessary, you can
modify the aspect ratio property at certain media query breakpoints.
Aspect Ratio can be used to embed images and videos.
Use Aspect Ratio to make sure images and videos are scaled correctly on
displays of various sizes. For example, you can use Aspect Ratio when a
customer needs to see a preview of an uploaded document.
Aspect Ratio can also be used to embed components, or other HTML elements that
needs to be set to a specific width-to-height ratio. A component or other HTML
element use case is the need to align an HTML element with an image in two columns.
<Anchorhref="https://org2.salsalabs.com/o/6857/p/salsa/donation/common/public/?donate_page_KEY=15780">Donate to the NAACP Legal Defense Fund</Anchor>
</Box>
</AspectRatio>
</Box>
Another use case is for color swatches on a documentation site. These color swatches
could be a specific height/width div that need to resize on specific devices.
Aspect Ratio will allow the color swatches to resize correctly based on a ratio.