النسب

استخدم العناصر الزائفة التي تم إنشاؤها لجعل عنصر يحافظ على نسبة العرض إلى الارتفاع التي تختارها. مثالي للتعامل مع الفيديو أو عرض الشرائح بشكل سريع الاستجابة بناءً على عرض الوالدين.

على هذه الصفحة

حول

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

يتم الإعلان عن نسب الارتفاع في خريطة Sass وتضمينها في كل فئة عبر متغير CSS ، والذي يسمح أيضًا بنسب العرض إلى الارتفاع المخصصة .

نصيحة محترف! لست بحاجة frameborder="0"إلى ما لديك <iframe>لأننا نتجاوز ذلك من أجلك في إعادة التشغيل .

مثال

قم بلف أي تضمين ، مثل an <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>

نسب

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

1 × 1

4x3

16x9

21x9

<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 هذا لإنشاء نسب عرض إلى ارتفاع مخصصة بسرعة مع بعض العمليات الحسابية السريعة من جانبك.

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

2 × 1

<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

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