Relación de aspecto

Limita las imágenes, los vídeos incrustados y los mapas a una proporción fija cuando se redimensionan: la herramienta de diseño que mantiene las tarjetas neobrutalistas alineadas con la cuadrícula.

import Image from "next/image"

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

Aspect ratio fija sus hijos a una proporción de ancho y alto constante —16:9, cuadrada, vertical— para que el contenido multimedia escale con su contenedor en lugar de recomponer la página. Esta variante es una envoltura sin dependencias sobre la propiedad CSS aspect-ratio (Base UI no incluye ninguna primitiva de aspect ratio) y no aplica estilos por diseño: los bordes y las sombras neobrutalistas los pone la tarjeta en la que lo coloques.

Úsalo cuando:

Cuadrículas de imágenes y miniaturas — normaliza dimensiones de origen dispares en tarjetas uniformes.
Vídeos y mapas incrustados — reserva un hueco 16:9 para que el iframe nunca desplace el diseño mientras carga.
Medios destacados adaptables — escala la imagen con el ancho de la columna sin fijar alturas a mano.

Instalación


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

Instala las siguientes dependencias:


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

Copia y pega el siguiente código en tu proyecto.

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 }

Actualiza las rutas de importación para que coincidan con la estructura de tu proyecto.

Uso

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

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

Ejemplos

Cuadrado

Un componente con proporción cuadrada, mediante la prop ratio={1 / 1}. Resulta útil para mostrar imágenes en formato cuadrado.

import Image from "next/image"

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

Vertical

Un componente con proporción vertical, mediante la prop ratio={9 / 16}. Resulta útil para mostrar imágenes en formato vertical.

import Image from "next/image"

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

RTL

Para activar la compatibilidad con RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad

AspectRatio renderiza un simple div: puramente presentacional, sin rol ni atributos ARIA de por medio. La accesibilidad recae en el contenido que alberga: da a las imágenes un texto alt con significado (o alt="" cuando sean decorativas) y un title a los iframes incrustados. Como el patrón habitual recorta con object-cover, evita imágenes cuyos bordes recortados contengan información.

Referencia de API

AspectRatio

El componente AspectRatio muestra contenido con la proporción que quieras.

Prop	Type	Default	Required
`ratio`	`number`	-	Sí
`className`	`string`	-	No

Para más información, consulta la documentación de Base UI.