Visão geral

O AspectRatio garante que o bloco filho mantenha a proporção definida independentemente do tamanho do container.

1:1 — padrão para cards

Proporção padrão do design system para cards com imagem. Use ratio={1} para garantir quadrado perfeito.

Import

import { AspectRatio } from "@/components/ui/aspect-ratio"

Como funciona

O componente usa a prop ratio para definir a proporção. O valor é um número representando largura dividido por altura (ex: 16/9, 1, 4/3).

Proporções comuns

Exemplos das proporções mais usadas em interfaces e mídias digitais.

16:9

Vídeo wide, banners

4:3

Imagens clássicas

1:1

Avatar, thumbnail quadrado

9:16

Stories, mobile

Com imagem real

O uso mais comum do AspectRatio é envolver uma imagem e garantir que ela preencha o espaço sem distorção.

Imagem com proporção 16:9

<AspectRatio ratio={16 / 9}>
  <img
    src="/minha-imagem.jpg"
    alt="Descrição"
    className="h-full w-full rounded-[10px] object-cover"
  />
</AspectRatio>

Padrão de implementação

Snippets prontos para os casos de uso mais comuns do componente.

Prop: ratio

number (ex: 16/9, 4/3, 1)

Define a proporção largura/altura do bloco. Obrigatório.

Uso básico

<AspectRatio ratio={16 / 9}>
  <div className="h-full w-full bg-muted rounded-[10px]" />
</AspectRatio>

Thumbnail quadrado com imagem

<AspectRatio ratio={1}>
  <img
    src="/thumb.jpg"
    alt="Thumbnail"
    className="h-full w-full object-cover rounded-[10px]"
  />
</AspectRatio>

Vídeo incorporado

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/..."
    className="h-full w-full rounded-[10px]"
    allowFullScreen
  />
</AspectRatio>

Props e uso

API disponível no componente instalado.

Props principais

ratio

number

Proporção largura/altura. Obrigatório. Ex: 16/9 resulta em aspect-ratio: 1.777...

className

string

Classes adicionais para o container externo.

children

ReactNode

Conteúdo a ser exibido com a proporção definida. Deve usar h-full e w-full para preencher o container.

Acessibilidade

Para imagens, sempre inclua o atributo alt descritivo para garantir que leitores de tela possam identificar o conteúdo.

Para vídeos incorporados via iframe, adicione title ao iframe para descrever o conteúdo.

O componente em si é um div neutro e não precisa de atributos ARIA específicos.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter