宽高比

在缩放时将图片、嵌入视频和地图限制为固定比例——这款布局工具可确保新粗野主义风格的卡片始终保持在网格内。

import Image from "next/image"

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

宽高比容器把子元素锁定在固定的宽高比例上——16:9、正方形、竖版——让媒体随容器一起缩放，而不是把页面挤得重排。这个变体是对 CSS aspect-ratio 属性的零依赖封装（Base UI 并没有提供宽高比组件），并且有意不加样式：新粗野主义的边框和阴影，来自您把它放进去的那张卡片。

适合以下场景：

图片网格与缩略图——把来源尺寸各异的图片规整成统一的卡片。
视频与地图嵌入——预留一个 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

要在 Neobrutalism 中启用 RTL 支持，请参阅 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 文档。