Aspect Ratio
Aspect Ratio
Un AspectRatio.Root di Radix — vincola il proprio contenuto a un rapporto larghezza/altezza fisso (un'immagine, un embed video, una mappa) indipendentemente dalla dimensione naturale del contenuto.
import { AspectRatio } from "@pompeitech/vesuvius-ui";Default
16:9
Un'immagine
Il caso più comune — un ratio che riserva lo spazio giusto prima ancora che l'immagine sia caricata, così nulla si sposta intorno ad essa:
API
AspectRatio
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
ratio | number | 1 (quadrato) | Larghezza divisa per altezza — 16 / 9, 4 / 3, 1 per un quadrato, 9 / 16 per un formato ritratto/storia. |
Più ogni prop nativa di <div> sulla radice, e il comportamento sottostante di AspectRatio.Root di Radix: si dimensiona internamente tramite il trucco della percentuale padding-bottom, quindi il suo unico figlio dovrebbe essere un elemento capace di espandersi per riempirlo (className="size-full object-cover" su un <img>, come sopra).