Components
AspectRatio
Container that enforces a fixed aspect ratio for its child content.
Category: Layout / Composite
Import
import { AspectRatio } from "@hareru/ui"Exports
| Name | Type | Description |
|---|---|---|
AspectRatio | Component | Main aspect ratio container |
AspectRatioProps | Type | Props interface |
Types
export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
ratio?: number
}Key Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | Width-to-height ratio. Use 16/9, 4/3, 1, etc. |
Common Ratios
| Ratio | Expression | Use Case |
|---|---|---|
| 1:1 | 1 | Avatar, thumbnail |
| 16:9 | 16/9 | Video, banner |
| 4:3 | 4/3 | Classic photo |
| 3:2 | 3/2 | Photography |
| 2:1 | 2/1 | Wide banner |
Usage
import { AspectRatio } from "@hareru/ui"
// Video embed (16:9)
<AspectRatio ratio={16 / 9}>
<img
src="photo.jpg"
alt="Photo"
style={{ objectFit: "cover", width: "100%", height: "100%" }}
/>
</AspectRatio>
// Square (1:1)
<AspectRatio ratio={1}>
<img src="avatar.jpg" alt="Avatar" style={{ objectFit: "cover", width: "100%", height: "100%" }} />
</AspectRatio>
// YouTube embed
<AspectRatio ratio={16 / 9}>
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Video"
style={{ width: "100%", height: "100%", border: "none" }}
allowFullScreen
/>
</AspectRatio>Notes
- Implemented with CSS
aspect-ratioproperty (no padding-top hack). - The child is positioned absolutely inside the container to fill all available space.
- Works with any content: images, videos, iframes, maps, or custom components.
- The outer container takes the full width of its parent (
width: 100%).