Ratio d'aspect

Limite les images, les vidéos intégrées et les cartes à un rapport d'aspect fixe lorsqu'elles sont redimensionnées — l'utilitaire de mise en page qui permet de maintenir les cartes néobrutalistes alignées sur la grille.

import Image from "next/image"

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

Aspect Ratio verrouille ses enfants sur un rapport largeur-hauteur fixe — 16:9, carré, portrait — pour que les médias s’adaptent à leur conteneur au lieu de bousculer la mise en page. Cette variante est une fine surcouche sans dépendance de la propriété CSS aspect-ratio (Base UI n’a pas de primitive aspect-ratio), sans style par choix : les bordures et ombres néobrutalistes viennent de la carte dans laquelle vous le placez.

À privilégier pour :

Grilles d’images et miniatures — uniformisez des sources aux dimensions hétérogènes en cartes homogènes.
Intégrations de vidéos et de cartes — réservez un emplacement 16:9 pour que l’iframe ne décale jamais la mise en page pendant son chargement.
Médias hero responsives — adaptez un visuel à la largeur de la colonne sans hauteurs codées en dur.

Installation


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

Installez les dépendances suivantes :


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

Copiez et collez le code suivant dans votre projet.

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 }

Adaptez les chemins d’import à la structure de votre projet.

Utilisation

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

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

Exemples

Carré

Un composant au format carré, avec la prop ratio={1 / 1}. Idéal pour afficher des images au format carré.

import Image from "next/image"

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

Portrait

Un composant au format portrait, avec la prop ratio={9 / 16}. Idéal pour afficher des images au format portrait.

import Image from "next/image"

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

RTL

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité

AspectRatio rend une simple div — purement présentationnelle, sans rôle ni attribut ARIA. L’accessibilité se joue dans le contenu placé à l’intérieur : donnez aux images un texte alt parlant (ou alt="" quand elles sont décoratives) et un title aux iframes intégrées. Le motif habituel recadrant avec object-cover, évitez les images dont les bords rognés portent de l’information.

Référence API

AspectRatio

Le composant AspectRatio affiche du contenu selon un ratio défini.

Prop	Type	Default	Required
`ratio`	`number`	-	Oui
`className`	`string`	-	Non

Pour en savoir plus, consultez la documentation Base UI.