Proporzioni

Adatta immagini, video incorporati e mappe a un rapporto fisso quando vengono ridimensionati: l'utility di layout che mantiene le schede in stile neobrutalista allineate alla griglia.

import Image from "next/image"

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

Aspect ratio vincola i suoi figli a un rapporto larghezza-altezza fisso — 16:9, quadrato, verticale — così i contenuti multimediali si adattano al contenitore invece di far rifluire la pagina. Questa variante è un wrapper senza dipendenze sopra la proprietà CSS aspect-ratio (Base UI non offre una primitiva per l’aspect ratio) e volutamente privo di stile: i bordi e le ombre neobrutalisti arrivano dalla card in cui lo inserisci.

Quando usarlo:

Griglie di immagini e miniature — normalizza sorgenti di dimensioni diverse in card uniformi.
Embed di video e mappe — riserva uno spazio 16:9 così l’iframe non sposta il layout mentre si carica.
Media hero responsive — scala le immagini con la larghezza della colonna senza altezze scritte nel codice.

Installazione


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

Installa le seguenti dipendenze:


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

Copia e incolla il seguente codice nel tuo progetto.

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 }

Aggiorna i percorsi di import in base alla struttura del tuo progetto.

Utilizzo

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

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

Esempi

Quadrato

Un componente con proporzioni quadrate, tramite la prop ratio={1 / 1}. È utile per mostrare immagini in formato quadrato.

import Image from "next/image"

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

Verticale

Un componente con proporzioni verticali, tramite la prop ratio={9 / 16}. È utile per mostrare immagini in formato verticale.

import Image from "next/image"

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

RTL

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità

AspectRatio rende un semplice div — puramente presentazionale, senza ruoli né attributi ARIA di mezzo. L’accessibilità vive nel contenuto al suo interno: dai alle immagini un testo alt significativo (o alt="" quando sono decorative) e agli iframe incorporati un title. Poiché il pattern abituale ritaglia con object-cover, evita immagini i cui bordi tagliati contengono informazioni.

Riferimento API

AspectRatio

Il componente AspectRatio mostra il contenuto nelle proporzioni desiderate.

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

Per maggiori informazioni, consulta la documentazione di Base UI.