Proporção

A altura é conhecida a partir da largura antes de algo ter carregado, por isso uma imagem ou uma incorporação que chegue tarde não empurra o resto da página para baixo. O filho preenche a caixa e é recortado em vez de ficar com barras.

Proporção básica

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

Proporções comuns

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

Incorporações

A razão de ser deste componente: um <iframe> não tem tamanho intrínseco, por isso sem uma proporção colapsa ou exige uma altura fixa à mão.

aqui entraria um <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)">aqui entraria um &lt;iframe&gt;</div>',
)

Num cartão

cardMedia() já faz isto no topo de um cartão. Usa aspectRatio() quando a caixa estiver noutro sítio.

cardMedia — já vem feito

aspectRatio — em qualquer outro sítio

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 — já vem feito')),
  ),
  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 — em qualquer outro sítio'),
      ),
    ),
  ),
)

Recorte

O filho é esticado para preencher e recortado com object-fit: cover. Para algo que não pode ser recortado — um logótipo, um diagrama — define object-fit: contain no filho, como faz cada demonstração desta página.

Props

Prop	Tipo	Predefinição	Descrição
`ratio`	`string`	`'16 / 9'`	Qualquer valor CSS de aspect-ratio.
`as`	`string`	`'div'`	Elemento a renderizar.