in English

نسبت ها

از عناصر شبه تولید شده استفاده کنید تا یک عنصر نسبت ابعاد انتخابی شما را حفظ کند. ایده آل برای مدیریت پاسخگوی ویدئو یا جاسازی های نمایش اسلاید بر اساس عرض والد.

در این صفحه

در باره

از کمک کننده نسبت برای مدیریت نسبت ابعاد محتوای خارجی مانند <iframe>s، <embed>s، <video>s و <object>s استفاده کنید. این کمک کننده ها همچنین می توانند بر روی هر عنصر فرزند استاندارد HTML (به عنوان مثال، a <div>یا <img>) استفاده شوند. سبک ها از کلاس والد .ratioبه طور مستقیم به کودک اعمال می شوند.

نسبت ابعاد در یک نقشه Sass اعلام شده و از طریق متغیر CSS در هر کلاس گنجانده شده است، که همچنین امکان نسبت ابعاد سفارشی را فراهم می کند .

طرفدار نکته! شما نیازی frameborder="0"به s خود ندارید زیرا ما آن را برای شما در راه اندازی مجدد<iframe> لغو می کنیم .

مثال

هر جاسازی مانند یک <iframe>را در یک عنصر والد با .ratioو یک کلاس نسبت ابعاد بپیچید. عنصر فرزند فوری به لطف انتخابگر جهانی ما به طور خودکار اندازه می .ratio > *شود.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

نسبت ابعاد

نسبت ابعاد را می توان با کلاس های اصلاح کننده سفارشی کرد. به طور پیش فرض کلاس های نسبت زیر ارائه می شود:

1x1

4×3

16x9

21x9

html

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

نسبت های سفارشی

هر .ratio-*کلاس شامل یک ویژگی سفارشی CSS (یا متغیر CSS) در انتخابگر است. شما می‌توانید این متغیر CSS را نادیده بگیرید تا نسبت‌های ابعادی سفارشی را در لحظه و با ریاضیات سریع ایجاد کنید.

به عنوان مثال، برای ایجاد یک نسبت تصویر 2x1، --bs-aspect-ratio: 50%روی .ratio.

2x1

html

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

این متغیر CSS تغییر نسبت ابعاد در نقاط شکست را آسان می کند. زیر 4x3 برای شروع است، اما به یک سفارشی 2x1 در نقطه شکست متوسط تغییر می کند.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3، سپس 2x1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

نقشه ساس

در داخل _variables.scss، می‌توانید نسبت‌های تصویری را که می‌خواهید استفاده کنید تغییر دهید. در اینجا $ratio-aspect-ratiosنقشه پیش فرض ما است. نقشه را همانطور که دوست دارید تغییر دهید و Sass خود را دوباره کامپایل کنید تا از آنها استفاده کنید.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);