# AspectRatio

Segura a proporção de uma caixa antes do conteúdo dela chegar.

```tsx
<AspectRatio ratio={16 / 9}>
  <img src={capa} alt="" />
</AspectRatio>
```

Serve para o que tem tamanho vindo de fora: imagem de produto, mapa,
incorporação de vídeo. Sem ela a linha inteira pula quando a imagem carrega, e a
pessoa clica no lugar errado porque o botão andou meio segundo depois de ela
mirar.

Imagem, vídeo e iframe dentro dela cobrem a moldura sozinhos. Imagem menor que a
caixa deixaria um vão que parece defeito de carregamento.

## Por que existe, se o CSS já faz

`aspect-ratio` resolve isto sozinho hoje. A peça existe para a proporção virar um
número passado por prop, e não mais uma classe arbitrária escrita em cada tela,
cada uma com um valor ligeiramente diferente.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `AspectRatio` - `ratio` numérico, igual. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { AspectRatio } from '@rivocode/ui'
```

## Exemplos

### Dezesseis por nove

```tsx
import { AspectRatio, Card, CardContent } from '@rivocode/ui'

export function Widescreen() {
  return (
    <div className="w-full max-w-md">
      <AspectRatio ratio={16 / 9} className="rounded-lg border border-border bg-surface-raised">
        <div className="flex size-full items-center justify-center text-sm text-fg-subtle">
          16 / 9
        </div>
      </AspectRatio>
    </div>
  )
}
```

### Num cartão de produto

```tsx
import { AspectRatio, Card, CardContent } from '@rivocode/ui'

export function InACard() {
  return (
    <Card className="w-64 overflow-hidden">
      <AspectRatio ratio={1} className="bg-surface-raised">
        <div className="flex size-full items-center justify-center text-sm text-fg-subtle">
          Quadrada
        </div>
      </AspectRatio>
      <CardContent>
        <p className="text-fg">Impressora fiscal</p>
        <p className="text-sm text-fg-muted">A moldura já tem altura antes da imagem chegar.</p>
      </CardContent>
    </Card>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `ratio` | `number` |  | 0.4.0 | Largura dividida por altura. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Accordion](/componentes/accordion.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [DescriptionList](/componentes/description-list.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)