宽高比

在指定比例范围内显示内容。

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="图像" 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"

要在 shadcn/ui 中启用从右到左 (RTL) 支持，请参阅RTL 配置指南。

"use client"

import * as React from "react"

AspectRatio 组件用于在指定的宽高比范围内显示内容。

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

更多信息，请参见 Radix UI 文档。