Tỷ lệ khung hình

import Image from "next/image"

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

Aspect ratio khóa các phần tử con theo một tỷ lệ rộng trên cao cố định — 16:9, vuông, dọc — nên media co giãn cùng vùng chứa thay vì làm xô lệch bố cục trang. Biến thể này là một lớp bọc không cần thư viện phụ thuộc nào quanh thuộc tính CSS aspect-ratio (Base UI không có primitive aspect-ratio) và cố tình không tạo kiểu: viền và bóng đổ neobrutalist đến từ chiếc card mà bạn đặt nó vào.

Nên dùng khi:

• Lưới ảnh và ảnh thu nhỏ — chuẩn hóa các nguồn ảnh lệch kích thước thành những card đồng nhất.
• Nhúng video và bản đồ — dành sẵn một chỗ 16:9 để iframe không làm xê dịch bố cục trong lúc tải.
• Media hero responsive — cho ảnh co giãn theo chiều rộng cột mà không phải đặt cứng chiều cao.

Cài đặt#

pnpmnpmyarnbun
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
Sao chép

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Sao chép

"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 }

Cách dùng#

Sao chépimport { AspectRatio } from "@/components/ui/aspect-ratio"

Sao chép<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

Ví dụ#

Vuông#

Một thành phần có tỷ lệ vuông, dùng prop ratio={1 / 1}. Hữu ích để hiển thị hình ảnh ở định dạng vuông.

import Image from "next/image"

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

Dọc#

Một thành phần có tỷ lệ dọc, dùng prop ratio={9 / 16}. Hữu ích để hiển thị hình ảnh ở định dạng dọc.

import Image from "next/image"

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

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

AspectRatio render một div thuần — hoàn toàn mang tính trình bày, không liên quan đến role hay thuộc tính ARIA nào. Khả năng truy cập nằm ở nội dung bên trong nó: hãy cho ảnh một alt có ý nghĩa (hoặc alt="" khi ảnh chỉ để trang trí) và cho iframe nhúng một title. Vì cách dùng thông thường sẽ cắt ảnh bằng object-cover, hãy tránh những ảnh mà phần rìa bị cắt lại mang thông tin.

Tham chiếu API#

AspectRatio#

Thành phần AspectRatio hiển thị nội dung theo tỷ lệ mong muốn.

Để biết thêm thông tin, xem tài liệu Base UI.