Primitivelayout

Aspect Ratio

Stable

Reserva a caixa que uma mídia vai ocupar antes de ela chegar, para que a página não reflua quando a imagem decodifica.

Instalação

npx up-web-ds add aspect-ratio

Preview

Default

16 / 9

Ratios

16 / 9
1 / 1
3 / 4
21 / 9

Media

Amostra quadrada recortada em 16 / 9
Amostra quadrada recortada em 1 / 1
Amostra quadrada recortada em 3 / 4

Loading

Amostra quadrada recortada em 16 / 9

All states

Default

16 / 9

Ratios

16 / 9
1 / 1
3 / 4
21 / 9

Media

Amostra quadrada recortada em 16 / 9
Amostra quadrada recortada em 1 / 1
Amostra quadrada recortada em 3 / 4

Loading

Amostra quadrada recortada em 16 / 9

Usage

@/components/ui/aspect-ratio
import { AspectRatio } from '@/components/ui/aspect-ratio'
Aspect Ratio
<AspectRatio ratio={16 / 9} className="w-full rounded-lg border">
  <div className="flex size-full items-center justify-center bg-muted type-small text-muted-foreground">
    16 / 9
  </div>
</AspectRatio>

Props

Props de AspectRatio
PropTypeDefaultDescription
ratio, obrigatórianumbersem valor padrãoWidth divided by height, e.g. `16 / 9`.

Estende React.ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

prop obrigatória.

Composition

É uma caixa única: a proporção vem de `ratio` e o conteúdo preenche o espaço reservado. Não há subcomponentes — o que entra dentro dela mantém a própria semântica.

Composição de AspectRatio

AspectRatio

  • AspectRatio

Metadata

Notas de acessibilidade

Não é interativo: não entra na sequência de tabulação, não tem estado e não anima, então teclado, alvo de toque e movimento não têm superfície onde falhar — verificado em navegador, onde a caixa não recebe tabindex e não declara transição nem animação sob prefers-reduced-motion: reduce. Leitor de tela verificado por teste: a caixa não assume papel nem nome, então o que é anunciado é só o conteúdo dentro dela; uma grade de mídia continua sendo uma grade de imagens em vez de virar uma grade de regiões aninhadas. Geometria verificada em navegador nos dois viewports: 16/9, 1/1, 3/4 e 21/9 medidos no layout real, e a proporção sobrevive à reflow para duas colunas em 375px. A mídia preenche a caixa de conteúdo com object-cover, recortando sem deformar.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
layout
Status
Stable

Origem e distribuição

Fonte
shadcn registry / aspect-ratio
Licença
MIT
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
Nenhuma
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda