نسبت تصویر (AspectRatio)

معرفی

کامپوننت AspectRatio برای حفظ نسبت ابعاد استفاده می‌شود.

چه زمانی استفاده کنیم:

• برای تصاویر و ویدیوهایی که باید نسبت ابعاد ثابتی داشته باشند
• وقتی محتوا باید responsive باشد اما نسبت عرض به ارتفاع حفظ شود
• برای placeholder تصاویر قبل از بارگذاری

چه زمانی استفاده نکنیم:

• وقتی ابعاد محتوا ثابت و از پیش مشخص است — از width/height مستقیم استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { AspectRatio } from '@partodata/ui'

export default function MyComponent() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img src="/image.jpg" alt="تصویر" className="size-full rounded-md object-cover object-center" />
    </AspectRatio>
  )
}

Props

مثال‌های رایج

// تصویر 16:9
<AspectRatio ratio={16 / 9}>
  <img src="/banner.jpg" alt="بنر" className="object-cover object-center w-full h-full rounded-md" />
</AspectRatio>

// تصویر مربعی 1:1
<AspectRatio ratio={1}>
  <img src="/avatar.jpg" alt="آواتار" className="object-cover object-center w-full h-full rounded-full" />
</AspectRatio>

// تصویر 4:3
<AspectRatio ratio={4 / 3}>
  <img src="/photo.jpg" alt="عکس" className="object-cover object-center w-full h-full" />
</AspectRatio>

راهنمای استفاده

دسترسی‌پذیری

• AspectRatio یک container ساده است و تأثیری بر دسترسی‌پذیری ندارد
• همیشه alt توصیفی روی تصاویر داخلی قرار دهید
• برای ویدیوها از aria-label استفاده کنید

کامپوننت‌های مرتبط

• Post — برای نمایش پست از پلتفرم‌های سوشال‌لیسنینگ: کارت رسانه را هرگز نمی‌بُرد: نسبت خود رسانه در بازهٔ 4:5 تا 1.91:1 با حداکثر حدود 500 پیکسل ارتفاع، و رسانه‌ای که بیرون از این بازه است یا بلندتر می‌شود کامل روی نوارهای محو همان تصویر؛ فقط کاشی (tile) می‌بُرد