宽高比

以期望的比例展示内容。

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

安装


pnpm dlx shadcn@latest add aspect-ratio

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"

AspectRatio 组件用于以期望的比例展示内容。

属性	类型	默认值	必填
`ratio`	`number`	-	是
`className`	`string`	-	否

更多信息请参见 Base UI 文档。