יחס גובה-רוחב

import Image from "next/image"

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

Aspect ratio נועל את הילדים ביחס קבוע של רוחב לגובה — 16:9, ריבוע, פורטרט — כך שמדיה משתנה עם המיכל במקום לגרום לזרימה מחדש של העמוד. הווריאנט הזה הוא עטיפה בלי תלויות מעל מאפיין ה-CSS aspect-ratio (ל-Base UI אין פרימיטיב של aspect-ratio) ובמכוון בלי עיצוב: המסגרות והצללים הנאו-ברוטליסטיים מגיעים מה-card שתכניסו אותו אליו.

השתמשו בו כש:

• רשתות תמונות ותמונות ממוזערות — מאחדים ממדי מקור מעורבים לכרטיסים אחידים.
• הטמעות וידאו ומפות — שומרים מקום 16:9 כדי שה-iframe לא יזיז את הפריסה בזמן טעינה.
• מדיית hero רספונסיבית — מגדילים יצירה עם רוחב העמודה בלי לקבע גבהים.

התקנה#

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
העתקה

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
העתקה

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

כדי להפעיל RTL ב-Neobrutalism, עיינו במדריך ההגדרה של RTL.

"use client"

import * as React from "react"

נגישות#

AspectRatio מרנדר div רגיל — מצגתי בלבד, בלי role או מאפייני ARIA. הנגישות חיה עם התוכן בפנים: תנו לתמונות alt משמעותי (או alt="" כשהן דקורטיביות) ול-iframes מוטמעים title. מכיוון שהדפוס הרגיל חותך עם object-cover, הימנעו מתמונות שבהן הקצוות החתוכים נושאים מידע.

תיעוד ה-API#

AspectRatio#

רכיב AspectRatio מציג תוכן בהתאם ליחס הממדים הרצוי.

למידע נוסף, עיינו בתיעוד של Base UI.