النسب
استخدم العناصر الزائفة التي تم إنشاؤها لجعل عنصر يحافظ على نسبة العرض إلى الارتفاع التي تختارها. مثالي للتعامل مع الفيديو أو عرض الشرائح بشكل سريع الاستجابة بناءً على عرض الوالدين.
حول
استخدم مساعد النسبة لإدارة نسب العرض إلى الارتفاع للمحتوى الخارجي مثل <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>
نسب
يمكن تخصيص نسب الارتفاع مع فئات المعدِّل. بشكل افتراضي ، يتم توفير فئات النسبة التالية:
<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
.
<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%)
);