نسبت تصویر (Aspect Ratio)

معرفی

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

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

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

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

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

استفاده

import { AspectRatio } from '@parto-system-design/ui'

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

Props

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

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

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

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

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

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

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

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

• InstagramPost — اگر نیاز به نمایش پست اینستاگرام با نسبت ابعاد استاندارد دارید، InstagramPost از AspectRatio داخلی استفاده می‌کند