AspectRatio
Keeps content at a fixed ratio (width / height). Useful for video embeds, image
placeholders and map containers.
16 : 9
import { AspectRatio } from '@gg-software/ui';
<AspectRatio ratio={16 / 9}>
<iframe src="https://www.youtube.com/embed/…" />
</AspectRatio>
<AspectRatio ratio={1}>
<img src="/avatar.jpg" alt="" />
</AspectRatio>Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 16 / 9 | width / height, e.g. 16 / 9 |
children | ReactNode | — | content rendered inside the component |
className | string | — | |
style | CSSProperties | — |
* required · generated from packages/ui/src/layout/AspectRatio/AspectRatio.tsx