Proporcje

Wysokość wynika z szerokości, zanim cokolwiek się załaduje, więc spóźniony obraz albo osadzenie nie spycha reszty strony w dół. Dziecko wypełnia ramkę i jest przycinane, a nie obramowywane pasami.

Podstawowe proporcje

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

Typowe proporcje

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

Osadzenia

Powód, dla którego ten komponent istnieje: <iframe> nie ma własnego rozmiaru, więc bez proporcji zapada się albo wymaga wysokości wpisanej na sztywno.

tu trafiłby <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)">tu trafiłby &lt;iframe&gt;</div>',
)

W karcie

cardMedia() robi to już dla górnej części karty. Po aspectRatio() sięgaj, gdy ramka jest gdzie indziej.

cardMedia — wbudowane

aspectRatio — wszędzie indziej

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 — wbudowane')),
  ),
  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 — wszędzie indziej'),
      ),
    ),
  ),
)

Przycinanie

Dziecko jest rozciągane do wypełnienia i przycinane przez object-fit: cover. Dla czegoś, czego przyciąć nie wolno — logo, diagramu — ustaw na dziecku object-fit: contain, tak jak robi to każde demo na tej stronie.

Propsy

Prop	Typ	Domyślnie	Opis
`ratio`	`string`	`'16 / 9'`	Dowolna wartość CSS aspect-ratio.
`as`	`string`	`'div'`	Element do wyrenderowania.