Rapport d’aspect

La hauteur se déduit de la largeur avant que quoi que ce soit ne soit chargé : une image ou une intégration qui arrive en retard ne pousse pas le reste de la page vers le bas. L’enfant remplit la boîte et se retrouve rogné plutôt que bordé de bandes noires.

Rapport d’aspect de base

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

Rapports courants

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),
    ),
  ),
)

Intégrations

La raison d’être de ce composant : une <iframe> n’a pas de taille intrinsèque, donc sans rapport elle s’effondre ou exige une hauteur codée en dur.

une <iframe> irait ici

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)">une &lt;iframe&gt; irait ici</div>',
)

Dans une carte

cardMedia() le fait déjà en haut d’une carte. Prenez aspectRatio() quand la boîte est ailleurs.

cardMedia — intégré

aspectRatio — partout ailleurs

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 — intégré')),
  ),
  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 — partout ailleurs'),
      ),
    ),
  ),
)

Rognage

L’enfant est étiré pour remplir et rogné avec object-fit: cover. Pour ce qui ne doit pas être rogné — un logo, un schéma — mettez object-fit: contain sur l’enfant, comme le fait chaque démo de cette page.

Props

Prop	Type	Défaut	Description
`ratio`	`string`	`'16 / 9'`	N’importe quelle valeur CSS aspect-ratio.
`as`	`string`	`'div'`	Élément à rendre.