Nisbatlar
Element siz tanlagan tomonlar nisbatini saqlab turishi uchun yaratilgan psevdo elementlardan foydalaning. Ota-onaning kengligidan kelib chiqqan holda video yoki slayd-shou o'rnatishlarni sezgir tarzda boshqarish uchun juda mos keladi.
Haqida
<iframe>
s, <embed>
s, <video>
s va s kabi tashqi kontentning tomonlar nisbatlarini boshqarish uchun nisbat yordamchisidan foydalaning <object>
. Bu yordamchilar har qanday standart HTML bola elementida ham ishlatilishi mumkin (masalan, a <div>
yoki <img>
). Uslublar ota-onalar .ratio
sinfidan to'g'ridan-to'g'ri bolaga qo'llaniladi.
Tomonlar nisbati Sass xaritasida e'lon qilinadi va CSS o'zgaruvchisi orqali har bir sinfga kiritiladi, bu esa moslashtirilgan tomonlar nisbatlariga ham imkon beradi .
frameborder="0"
,
chunki biz buni siz uchun Reboot<iframe>
-da bekor qilamiz
.
Misol
<iframe>
, kabi har qanday joylashtirishni asosiy elementga .ratio
va tomonlar nisbati sinfiga o'rang . Bizning universal selektorimiz tufayli darhol bola elementi avtomatik ravishda o'lchanadi .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Tomonlar nisbati
Tomonlar nisbatlarini modifikator sinflari bilan moslashtirish mumkin. Odatiy bo'lib, quyidagi nisbat sinflari taqdim etiladi:
<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>
Maxsus nisbatlar
Har bir .ratio-*
sinf selektorda CSS maxsus xususiyatini (yoki CSS o'zgaruvchisini) o'z ichiga oladi. Siz o'zingizning qo'lingizdan ba'zi tez matematika bilan tezda shaxsiy nisbatlarni yaratish uchun ushbu CSS o'zgaruvchisini bekor qilishingiz mumkin.
Masalan, 2x1 tomonlar nisbati yaratish --bs-aspect-ratio: 50%
uchun .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Ushbu CSS o'zgaruvchisi to'xtash nuqtalari bo'ylab tomonlar nisbatini o'zgartirishni osonlashtiradi. Quyida boshlash uchun 4x3, lekin o'rtacha uzilish nuqtasida maxsus 2x1 ga o'zgaradi.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass xaritasi
ichida _variables.scss
siz foydalanmoqchi bo'lgan tomonlar nisbatlarini o'zgartirishingiz mumkin. Mana bizning standart $ratio-aspect-ratios
xaritamiz. Xaritani xohlaganingizcha o'zgartiring va ulardan foydalanish uchun Sass-ni qayta kompilyatsiya qiling.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);