Հարաբերակցություններ

Օգտագործեք ստեղծված կեղծ տարրերը, որպեսզի տարրը պահպանի ձեր ընտրած կողմի հարաբերակցությունը: Կատարյալ հարմար է վիդեո կամ սլայդշոուի ներկառուցման համար, որը հիմնված է ծնողի լայնության վրա:

Այս էջում

Մասին

Օգտագործեք հարաբերակցության օգնականը՝ կառավարելու արտաքին բովանդակության հարաբերակցությունները, ինչպիսիք են <iframe>s, <embed>s, <video>s և <object>s: Այս օգնականները կարող են օգտագործվել նաև ցանկացած ստանդարտ HTML երեխայի տարրի վրա (օրինակ՝ a <div>կամ <img>): Ոճերը կիրառվում են ծնողական .ratioդասից անմիջապես երեխայի վրա:

Ասպեկտների հարաբերակցությունները հայտարարագրված են Sass քարտեզում և ներառված յուրաքանչյուր դասում CSS փոփոխականի միջոցով, որը նաև թույլ է տալիս հարմարեցված կողմերի հարաբերակցություններ :

Pro-Tip! Ձեզ հարկավոր չէ frameborder="0"ձեր <iframe>s-ի վրա, քանի որ մենք վերագործարկում ենք այն ձեզ համար Reboot- ում :

Օրինակ

Փաթեթավորեք ցանկացած զետեղում, օրինակ՝ <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>

Ասպեկտների հարաբերակցությունները

Ասպեկտների հարաբերակցությունները կարող են հարմարեցվել մոդիֆիկատորների դասերի միջոցով: Լռելյայն տրամադրվում են հետևյալ հարաբերակցության դասերը.

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>

Պատվերով գործակիցներ

Յուրաքանչյուր .ratio-*դաս ընտրիչում ներառում է CSS հատուկ հատկություն (կամ CSS փոփոխական): Դուք կարող եք անտեսել այս CSS փոփոխականը՝ ձեր կողմից որոշակի արագ մաթեմատիկայի միջոցով ստեղծելու հարմարեցված կողմերի հարաբերակցություններ:

Օրինակ՝ 2x1 հարաբերակցություն ստեղծելու համար --bs-aspect-ratio: 50%դրեք .ratio.

2x1

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

Sass քարտեզ

Դուք կարող եք փոխել կողմերի հարաբերակցությունները _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%)
);