Data display · Application UI
Aspect Ratio
Container that locks child content to a fixed width-to-height ratio via CSS custom property.
@byronwade/foundation@byronwade/utils
Feature showcase
Installation
Features
5 examples
Default, Square, Portrait, Cinematic, Thumbnail.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | - | Width divided by height (e.g. 16/9, 1, 4/3). |
| className | string | - | Additional classes merged onto the root. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/aspect-ratio.tsx |
| Default example | content/examples/aspect-ratio/default.tsx |
| Square example | content/examples/aspect-ratio/square.tsx |
| Portrait example | content/examples/aspect-ratio/portrait.tsx |
| Cinematic example | content/examples/aspect-ratio/cinematic.tsx |
| Thumbnail example | content/examples/aspect-ratio/thumbnail.tsx |