Proporzioni

L’altezza si conosce dalla larghezza prima che qualunque cosa si sia caricata, quindi un’immagine o un embed che arrivano tardi non spingono giù il resto della pagina. Il figlio riempie il riquadro e viene ritagliato invece che incorniciato da bande.

Proporzioni di base

aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2)' },
  '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 2rem">',
)

Proporzioni comuni

16 / 9

4 / 3

1 / 1

3 / 4

grid({ min: '9rem' },
  ...['16 / 9', '4 / 3', '1 / 1', '3 / 4'].map((ratio) =>
    stack({ gap: 'xs' },
      aspectRatio({ ratio, style: 'background: var(--su-surface-2); border-radius: 0.5rem' },
        '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 1rem">'),
      text({ variant: 'caption', tone: 'muted', align: 'center' }, ratio),
    ),
  ),
)

Embed

Il motivo per cui questo componente esiste: un <iframe> non ha dimensioni intrinseche, quindi senza proporzioni collassa o ha bisogno di un’altezza fissata a mano.

qui ci andrebbe un <iframe>

aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2); border-radius: 0.6rem' },
  '<div style="display: grid; place-items: center; color: var(--su-text-subtle)">qui ci andrebbe un &lt;iframe&gt;</div>',
)

In una scheda

cardMedia() fa già questo per la parte alta di una scheda. Ricorri ad aspectRatio() quando il riquadro sta da qualche altra parte.

cardMedia — incorporato

aspectRatio — ovunque altrove

grid({ min: '12rem' },
  card(
    cardMedia({ src: '/logo.svg', alt: '', style: 'background: var(--su-surface-2); object-fit: contain; padding: 1rem' }),
    cardBody(text({ variant: 'small' }, 'cardMedia — incorporato')),
  ),
  card(
    cardBody(
      stack({ gap: 'sm' },
        aspectRatio({ ratio: '1 / 1', style: 'background: var(--su-surface-2); border-radius: 0.5rem' },
          '<img src="/logo.svg" alt="" style="object-fit: contain; padding: 1rem">'),
        text({ variant: 'small' }, 'aspectRatio — ovunque altrove'),
      ),
    ),
  ),
)

Ritaglio

Il figlio viene allungato per riempire e ritagliato con object-fit: cover. Per qualcosa che non deve essere ritagliato — un logo, un diagramma — imposta object-fit: contain sul figlio, come fa ogni demo di questa pagina.

Props

Prop	Tipo	Predefinito	Descrizione
`ratio`	`string`	`'16 / 9'`	Qualunque valore CSS di aspect-ratio.
`as`	`string`	`'div'`	Elemento da renderizzare.