النِسَب (Ratios)

حول (About)

استخدم مساعد النِسَب (ratio helper) لإدارة نِسَب العرض إلى الارتفاع للمحتوى الخارجي مثل <iframe>s و <embed>s و <video>s و <object>s. يمكن استخدام هذه المساعدات أيضاً على أي عنصر HTML فرعي قياسي (على سبيل المثال، <div> أو <img>). يتم تطبيق الأنماط من الفئة (class) الأب .ratio مباشرة على العنصر الفرعي.

يتم التصريح عن نِسَب العرض إلى الارتفاع في خريطة (map) Sass وتضمينها في كل فئة (class) عبر متغير 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>

نِسَب العرض إلى الارتفاع (Aspect ratios)

يمكن تخصيص نِسَب العرض إلى الارتفاع باستخدام فئات التعديل. بشكل افتراضي، يتم توفير فئات النِسَب التالية:

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

نِسَب مخصصة (Custom ratios)

تتضمن كل فئة .ratio-* خاصية CSS مخصصة (أو متغير CSS) في المحدد. يمكنك تجاوز متغير CSS هذا لإنشاء نِسَب عرض إلى ارتفاع مخصصة بشكل سريع من خلال بعض العمليات الحسابية البسيطة.

على سبيل المثال، لإنشاء نسبة عرض إلى ارتفاع 2x1، قم بتعيين --bs-aspect-ratio: 50% على .ratio.

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

يجعل متغير CSS هذا من السهل تعديل نسبة العرض إلى الارتفاع عبر نقاط التوقف (breakpoints). المثال التالي يبدأ بنسبة 4x3، ولكن يتغير إلى نسبة مخصصة 2x1 عند نقطة التوقف المتوسطة (medium breakpoint).

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

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

خرائط Sass (Sass maps)

داخل ملف _variables.scss، يمكنك تغيير نِسَب العرض إلى الارتفاع التي تريد استخدامها. إليك خريطة (map) $ratio-aspect-ratios الافتراضية لدينا. قم بتعديل الخريطة كما تشاء وأعد تجميع الـ Sass الخاص بك لاستخدامها.

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