Aspect Ratio

Medya ve içerik yüzeyleri için sabit en-boy oranlı kapsayıcı.

AspectRatio.tsx

16:9 medya yüzeyi

Her genişlikte oranını korur

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/aspect-ratio.json

Kullanım Örneği

import { AspectRatio } from "@/components/ui"

<AspectRatio ratio={16 / 9} className="bg-surface-muted">
  <img src="/cover.jpg" alt="Proje kapağı" className="h-full w-full object-cover" />
</AspectRatio>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
ratio	number	16 / 9	Kapsayıcının genişlik/yükseklik oranı.
children	ReactNode	—	Oranlı yüzeyde gösterilecek içerik.
className	string	—	Kapsayıcıya eklenen yardımcı sınıflar.