# <AspectRatio />
The <AspectRatio /> component renders its contents in a responsive container with a desired aspect ratio. It's useful for things like embedded IFrames or videos.
# Usage
<AspectRatio ratio="16:9">
...
</AspectRatio>
RESULT
16:9
# Props
# ratio
- Type:
String - Default:
16:9
The desired aspect-ratio for the component. This prop must be in the format <WIDTH>:<HEIGHT>.
# as
- Type:
String -
Default:
div
The HTML element to render the
< AspectRatio /> component as. See
semantic HTML
for more details.
# css
- Type:
Object - Default:
{}
Additional styles applied to the component that leverage the theme when
available. Visit the
css prop documentation for more
details.
# Examples
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis inventore autem minus optio dolorem id. Cumque pariatur ex facere voluptatem perspiciatis porro libero. Suscipit blanditiis eum saepe obcaecati quis aliquam?