109k
新建

宽高比

上一个下一个

在指定的比例内显示内容。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
Photo
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} 属性的正方形宽高比组件。这对于以正方形格式显示图像非常有用。

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

纵向

使用 ratio={9 / 16} 属性的纵向宽高比组件。这对于以纵向格式显示图像非常有用。

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

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

Photo
美丽的风景
"use client"

import * as React from "react"

API 参考

AspectRatio

AspectRatio 组件可在指定的比例内显示内容。

属性类型默认必填
rationumber-是
classNamestring-否

欲了解更多信息，请参阅 Radix UI 文档。