Соотношение сторон

Обеспечивает соблюдение фиксированного соотношения сторон изображений, встроенных видеороликов и карт при изменении их размера — утилита верстки, которая позволяет сохранять расположение карт в стиле «необрутализм» в пределах сетки.

import Image from "next/image"

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

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

Когда это пригодится:

Сетки изображений и превью — привести разнородные размеры исходников к одинаковым карточкам.
Встроенные видео и карты — заранее занять слот 16:9, чтобы iframe не сдвигал вёрстку, пока загружается.
Адаптивные обложки — масштабировать изображение по ширине колонки, не задавая высоту руками.

Установка


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 — чисто оформительский элемент, без роли и ARIA-атрибутов. Доступность здесь определяет содержимое: давайте изображениям осмысленный alt (или alt="", если они декоративные), а встроенным iframe — title. Обычная схема обрезает содержимое через object-cover, поэтому избегайте изображений, у которых по краям остаётся что-то важное.

Справочник API

AspectRatio

Компонент AspectRatio показывает контент в нужном соотношении сторон.

Prop	Type	Default	Required
`ratio`	`number`	-	Да
`className`	`string`	-	Нет

Подробнее см. в документации Base UI.