Співвідношення сторін

Забезпечує дотримання фіксованого співвідношення сторін зображень, вбудованих відео та карт під час їхнього масштабування — утиліта для верстки, яка дозволяє карткам у стилі «необруталізм» залишатися в межах сітки.

import Image from "next/image"

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

Aspect ratio фіксує дочірні елементи у заданому співвідношенні ширини до висоти — 16:9, квадрат, портрет — тож медіа масштабується разом із контейнером, не перебудовуючи сторінку. Цей варіант — обгортка без залежностей над CSS-властивістю aspect-ratio (у Base UI немає примітиву aspect-ratio) і навмисно без власних стилів: необруталістські рамки та тіні дає картка, у яку ви його вкладете.

Коли це стане в пригоді:

Сітки зображень і мініатюри — звести різні розміри джерел до однакових карток.
Вбудовані відео та мапи — зарезервувати слот 16:9, щоб iframe не зсував макет під час завантаження.
Адаптивні hero-медіа — масштабувати ілюстрацію за шириною колонки без жорстко заданої висоти.

Встановлення


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

Встановіть такі залежності:


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

Скопіюйте та вставте наведений нижче код у свій проєкт.

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 }

Оновіть шляхи імпорту відповідно до структури вашого проєкту.

Використання

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

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

Приклади

Квадрат

Компонент із квадратним співвідношенням сторін через проп ratio={1 / 1}. Корисно для показу зображень у квадратному форматі.

import Image from "next/image"

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

Портрет

Компонент із портретним співвідношенням сторін через проп ratio={9 / 16}. Корисно для показу зображень у портретному форматі.

import Image from "next/image"

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

RTL

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

"use client"

import * as React from "react"

Доступність

AspectRatio рендерить звичайний div — суто презентаційний, без role чи ARIA-атрибутів. Доступність забезпечує вміст усередині: давайте зображенням змістовний alt (або alt="", якщо вони декоративні), а вбудованим iframe — title. Оскільки типовий патерн обрізає через object-cover, уникайте зображень, у яких важлива інформація лежить на обрізаних краях.

Довідник API

AspectRatio

Компонент AspectRatio показує вміст у бажаному співвідношенні сторін.

Prop	Type	Default	Required
`ratio`	`number`	-	Так
`className`	`string`	-	Ні

Докладніше див. у документації Base UI.