AspectRatio
Keeps content at a fixed width-to-height ratio, with a placeholder when there is no image yet.
In context
Harbour rebrand
Brand, due 24 Oct
Tideline mobile
Product, due 7 Nov
Crew interviews
Research, due 17 Oct
Props
| Prop | Type | Required | Default |
|---|---|---|---|
ratio | number | undefined | No | 1 |
src | string | undefined | No | — |
alt | string | undefined | No | — |
className | string | undefined | No | — |
placeholder | number | boolean | undefined | No | — |
watermark | string | undefined | No | — |
Placeholders
Empty and low-fidelity by default. placeholder shows a built-in illustrated image whose own ratio is closest to the one you ask for; pass a number to pick a variant of that ratio.
Accessibility
Pass a meaningful alt with a real src. With only placeholder set, or nothing, the box is decorative and alt is left empty.
data-rebar-* attributes
data-rebar-component="aspect-ratio" on the root; data-rebar-part="empty" on the box when neither src nor placeholder is set.
Migrating to Ant Design
AntD has no aspect-ratio component. Replace it with your codebase's fixed-ratio convention (a CSS utility, or the padding-top trick).