Пропорциялар

Элемент таңдауыңыздың арақатынасын сақтау үшін жасалған псевдо элементтерді пайдаланыңыз. Ата-ананың еніне негізделген бейне немесе слайд-шоу ендірулерін жауапты өңдеу үшін өте қолайлы.

Бұл бетте

туралы

<iframe>s, <embed>s, <video>s және s сияқты сыртқы мазмұнның арақатынастарын басқару үшін қатынас көмекшісін пайдаланыңыз <object>. Бұл көмекшілер кез келген стандартты HTML еншілес элементінде де қолданылуы мүмкін (мысалы, a <div>немесе <img>). Стильдер ата-ана .ratioсыныбынан тікелей балаға қолданылады.

Форматтардың арақатынастары Sass картасында жарияланады және CSS айнымалысы арқылы әрбір сыныпқа қосылады, бұл сонымен қатар теңшелетін арақатынастарға мүмкіндік береді .

Pro-Tip! Қайта жүктеуде біз оны қайта анықтайтындықтан, сізге frameborder="0"қажет емес . <iframe>

Мысал

<iframe>Кез келген ендіруді, мысалы , басты элементке .ratioжәне арақатынас сыныбына ораңыз . Біздің әмбебап селектордың арқасында тікелей еншілес элемент автоматты түрде өлшенеді .ratio > *.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Пропорциялар

Пропорцияларды модификатор класстарымен теңшеуге болады. Әдепкі бойынша келесі қатынас кластары беріледі:

1х1

4х3

16x9

21x9

html

<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 айнымалысын қайта анықтай аласыз, бұл сіздің тарапыңыздан жылдам математикамен жылдам реттелетін арақатынастарды жасау.

Мысалы, 2x1 арақатынасын жасау үшін параметріне орнатыңыз --bs-aspect-ratio: 50%..ratio

2х1

html

<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

html

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