<.aspect_ratio ratio={16 / 8}>
<img
src="https://images.unsplash.com/photo-1479030160180-b1860951d696?&auto=format&fit=crop&w=1200&q=80"
alt="A house in a forest"
style="object-fit: cover; width: 100%; height: 100%; border-radius: var(--radius-2);"
/>
</.aspect_ratio>API Reference
This component wraps the Aspect Ratio primitive and preserves layout proportions for its child content.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
Additional CSS classes |
ratio
|
any
|
—
|
Aspect ratio as float (e.g. 16/9) or string (e.g. "16:9") |
style
|
string
|
nil
|
Additional inline styles |
class
Additional CSS classes
Type
string
Default
nil
ratio
Aspect ratio as float (e.g. 16/9) or string (e.g. "16:9")
Type
any
Default
—
style
Additional inline styles
Type
string
Default
nil