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.

Ushbu sahifada

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

Pro-Tip! Sizga kerak emas frameborder="0", chunki biz buni siz uchun Reboot<iframe> -da bekor qilamiz .

Misol

<iframe>, kabi har qanday joylashtirishni asosiy elementga .ratiova 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:

1x1

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>

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.

2x1

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

4x3, keyin 2x1

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

Sass xaritasi

ichida _variables.scsssiz foydalanmoqchi bo'lgan tomonlar nisbatlarini o'zgartirishingiz mumkin. Mana bizning standart $ratio-aspect-ratiosxaritamiz. 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%)
);