نسبت ها

در باره

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

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

مثال

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

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

نسبت ابعاد

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

<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.

<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
  }
}

<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%)
);