Aspect ratio
A box whose height follows its width through one ratio
320px wide at 16:9 · 180px tall
Usage
import { AspectRatio } from "@gpuixui/components/aspect-ratio";
export const Still = () => (
<div style={{ width: 360 }}>
<AspectRatio ratio={16 / 9}>
<div style={{ width: "100%", height: "100%" }} />
</AspectRatio>
</div>
);Composition
AspectRatio
└── contentAPI
| Part | Prop | Type | Default |
|---|---|---|---|
AspectRatio | ratio | number — width divided by height | 1 |
AspectRatio | className | string | — |
AspectRatio | style | StyleDesc — merged last | — |
AspectRatio | children | ReactNode — the content that fills the box | — |
AspectRatio | testId | string | — |
Edit this page on GitHubpackages/components/docs/aspect-ratio.mdx