Proporção

Limita imagens, vídeos incorporados e mapas a uma proporção fixa à medida que são redimensionados — o utilitário de layout que mantém os cartões neobrutalistas alinhados na grade.

import Image from "next/image"

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

O aspect ratio trava os filhos em uma proporção fixa entre largura e altura — 16:9, quadrado, retrato — para que a mídia acompanhe o tamanho do contêiner em vez de reorganizar a página. Esta variante é um wrapper sem dependências sobre a propriedade CSS aspect-ratio (o Base UI não tem um primitivo de aspect ratio) e sem estilo de propósito: as bordas e sombras neobrutalistas vêm do card em que você o encaixa.

Use quando:

Grades de imagens e miniaturas — normalize dimensões de origem variadas em cards uniformes.
Embeds de vídeo e mapa — reserve um espaço 16:9 para que o iframe nunca desloque o layout enquanto carrega.
Mídia de destaque responsiva — escale a arte junto com a largura da coluna sem fixar alturas no código.

Instalação


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
npx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/aspect-ratio.json

Instale as seguintes dependências:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copie e cole o código a seguir no seu projeto.

components/ui/aspect-ratio.tsx

"use client"

import { AspectRatio as AspectRatioPrimitive } from "radix-ui"

function AspectRatio({
  ...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
}

export { AspectRatio }

Atualize os caminhos de importação para corresponder à estrutura do seu projeto.

Uso

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

<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

Exemplos

Quadrado

Um componente com proporção quadrada, usando a prop ratio={1 / 1}. É útil para exibir imagens em formato quadrado.

import Image from "next/image"

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

Retrato

Um componente com proporção retrato, usando a prop ratio={9 / 16}. É útil para exibir imagens em formato retrato.

import Image from "next/image"

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

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade

AspectRatio renderiza uma div comum — puramente visual, sem role nem atributos ARIA envolvidos. A acessibilidade fica por conta do conteúdo dentro dele: dê às imagens um texto alt significativo (ou alt="" quando decorativas) e um title aos iframes incorporados. Como o padrão usual recorta com object-cover, evite imagens cujas bordas cortadas carreguem informação.

Referência da API

AspectRatio

O componente AspectRatio exibe conteúdo na proporção que você quiser.

Prop	Type	Default	Required
`ratio`	`number`	-	Sim
`className`	`string`	-	Não

Para mais informações, consulte a documentação do Base UI.