आस्पेक्ट रेशियो

import Image from "next/image"

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

Aspect ratio अपने चिल्ड्रन को तय चौड़ाई-से-ऊँचाई अनुपात — 16:9, स्क्वेयर, पोर्ट्रेट — पर बाँधता है, ताकि मीडिया कंटेनर के साथ स्केल हो, पेज को reflow न करे। यह वैरिएंट CSS aspect-ratio प्रॉपर्टी पर डिपेंडेंसी-मुक्त रैपर है (Base UI के पास aspect-ratio प्रिमिटिव नहीं) और जानबूझकर अनस्टाइल्ड है: नियोब्रूटलिस्ट बॉर्डर और छायाएँ उस कार्ड से आती हैं जिसमें आप इसे डालते हैं।

इसे इन स्थितियों में चुनें:

• इमेज ग्रिड और थंबनेल — मिश्रित सोर्स डाइमेंशन को एक जैसे कार्ड में लाएँ।
• वीडियो और मैप एम्बेड — 16:9 स्लॉट आरक्षित रखें ताकि iframe लोड होते समय लेआउट न हिले।
• रिस्पॉन्सिव हीरो मीडिया — ऊँचाई हार्डकोड किए बिना आर्टवर्क को कॉलम चौड़ाई के साथ स्केल करें।

इंस्टॉलेशन#

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} prop का उपयोग करने वाला एक वर्गाकार aspect ratio कंपोनेंट। यह इमेज को वर्गाकार फ़ॉर्मैट में दिखाने के लिए उपयोगी है।

import Image from "next/image"

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

पोर्ट्रेट#

ratio={9 / 16} prop का उपयोग करने वाला एक पोर्ट्रेट aspect ratio कंपोनेंट। यह इमेज को पोर्ट्रेट फ़ॉर्मैट में दिखाने के लिए उपयोगी है।

import Image from "next/image"

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

RTL#

Neobrutalism में RTL सपोर्ट सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें।

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

AspectRatio एक सादा div रेंडर करता है — पूरी तरह प्रेजेंटेशनल, कोई role या ARIA एट्रिब्यूट नहीं। एक्सेसिबिलिटी अंदर के कंटेंट पर निर्भर करती है: इमेज को सार्थक alt दें (या सजावटी होने पर alt="") और एम्बेडेड iframe को title दें। आमतौर पर object-cover से क्रॉप होता है, इसलिए ऐसी इमेज से बचें जिनके कटे किनारों में जानकारी हो।

API रेफ़रेंस#

AspectRatio#

AspectRatio कंपोनेंट मनचाहे अनुपात में कंटेंट दिखाता है।

अधिक जानकारी के लिए, Base UI डॉक्यूमेंटेशन देखें।