Aspect Ratio

نصب

pnpm dlx @simurgh-ui/cli add aspect-ratio

import { AspectRatio } from '@simurgh-ui/react/aspect-ratio';
import { AspectRatio as VueAspectRatio } from '@simurgh-ui/vue/aspect-ratio';
import { AspectRatioComponent } from '@simurgh-ui/angular/aspect-ratio';
import '@simurgh-ui/styles/aspect-ratio.css';

پیش‌نمایش واقعی

Live component Aspect Ratio ◆

16:9 media area

استفاده

<AspectRatio ratio={16 / 9}>
  <img src={cover} alt="کوه دماوند" />
</AspectRatio>

<AspectRatio :ratio="16 / 9">
  <img :src="cover" alt="کوه دماوند" />
</AspectRatio>

<simurgh-aspect-ratio [ratio]="16 / 9">
  <img [src]="cover" alt="کوه دماوند" />
</simurgh-aspect-ratio>

رفتار و دسترس‌پذیری

ratio یک عدد مثبت است و مقدار پیش‌فرض آن ۱ است. این primitive فقط اندازهٔ container را کنترل می‌کند و semantics فرزند را تغییر نمی‌دهد. تصویر اطلاعاتی به alt دقیق نیاز دارد؛ تصویر تزئینی باید alt="" داشته باشد.

برای جلوگیری از جابه‌جایی layout، width مناسب parent را مشخص کنید و برای تصویر یا ویدئو از object-fit سازگار با برش موردنظر استفاده کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.