Composant · Layout

AspectRatio

Documenté

Conteneur qui maintient un ratio d'aspect constant (via la propriété CSS aspect-ratio) pour médias, images ou embeds responsives. Le contenu remplit la boîte.

16 / 9

1 / 1

Voir le code (Svelte)

<AspectRatio ratio="16 / 9">
  <div style="background:var(--st-color-surface-subtle,#f0f0f0);width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:4px">16 / 9</div>
</AspectRatio>
<AspectRatio ratio="1 / 1">
  <div style="background:var(--st-color-surface-subtle,#f0f0f0);width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:4px">1 / 1</div>
</AspectRatio>

Exemples

16 / 9

1 / 1

4 / 3

Voir le code (Svelte)

<div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))">
  <AspectRatio ratio="16/9">
    <div style="align-items:center;background:var(--st-semantic-surface-subtle);border:1px dashed var(--st-semantic-border-subtle);color:var(--st-semantic-text-secondary);display:flex;font-weight:600;justify-content:center;height:100%;width:100%">16 / 9</div>
  </AspectRatio>
  <AspectRatio ratio="1/1">
    <div style="align-items:center;background:var(--st-semantic-surface-subtle);border:1px dashed var(--st-semantic-border-subtle);color:var(--st-semantic-text-secondary);display:flex;font-weight:600;justify-content:center;height:100%;width:100%">1 / 1</div>
  </AspectRatio>
  <AspectRatio ratio="4/3">
    <div style="align-items:center;background:var(--st-semantic-surface-subtle);border:1px dashed var(--st-semantic-border-subtle);color:var(--st-semantic-text-secondary);display:flex;font-weight:600;justify-content:center;height:100%;width:100%">4 / 3</div>
  </AspectRatio>
</div>

API du composant

Prop	Type	Par défaut
`ratio`	`string` (ex. `"16/9"`)	`"16/9"`
`children`	`Snippet`	le contenu
`class`	`string`	optionnel