AspectRatio
aspect-ratioKeeps media or content inside a fixed width-to-height ratio.
Usage
16 / 9 widescreen
Use ratio to lock the aspect ratio, and the height will adapt proportionally when the container width changes (commonly used for videos/covers).
<div className="w-64">
<AspectRatio ratio={16 / 9}>
<img src="..." alt="..." />
</AspectRatio>
</div>1 / 1 square
ratio={1} Lock square, suitable for avatars, thumbnails, and icon placeholders.
<div className="w-40">
<AspectRatio ratio={1}>
<img src="..." alt="..." />
</AspectRatio>
</div>Vertical 3 / 4
ratio is less than 1, which is the vertical ratio, suitable for portrait cards/posters.
<div className="w-40">
<AspectRatio ratio={3 / 4}>
<img src="..." alt="..." />
</AspectRatio>
</div>When to use
Use AspectRatio to keep an image, video, or card at a fixed ratio such as 16:9, 1:1, or 4:3. Its height follows the available width without layout shift. The component only constrains the ratio using CSS and can render as an RSC. Use Viewport when the layout itself must respond to container width, or FitScreen when a fixed-size design must be scaled proportionally to fill the available area.
Import
import { AspectRatio } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| ratio | number | 1 | Width divided by height, such as 16/9, 1, or 4/3. |
Inherits HTMLAttributes<HTMLDivElement>.
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Child content, usually an image or video, that automatically fills the container. |
Usage guidelines
- `ratio` is a number, not a string. Pass an expression such as
16 / 9or a numeric value such as1.7778; do not pass"16/9". - The parent determines the width. AspectRatio fills the available width and derives its height from
ratio. If the parent does not constrain the width, the component expands to the full available width. Child elements do not need their ownw-full h-full; the component already stretches them to fill the container.
Related
Layout · AdminLayout · ScrollArea · Viewport · Resizable · FitScreen
Playground
<AspectRatio ratio={1.7778}>
<img src="..." alt="..." />
</AspectRatio>