Ditekanyetšo

Šomiša dielemente tša maaka tše di tšweleditšwego go dira gore elemente e boloke tekanyo ya dikarolo yeo o e kgethilego. E phethagetše bakeng sa go swara ka go arabela di-embed tša bidio goba tša pontšho ya diselaete tšeo di theilwego godimo ga bophara bja motswadi.

Letlakaleng le

Mabapi le

Šomiša mothuši wa tekanyo go laola ditekanyo tša dikarolo tša diteng tša ka ntle go swana le <iframe>s, <embed>s, <video>s, le <object>s. Bathuši ba gape ba ka šomišwa go elemente efe goba efe ya ngwana ya HTML ya maemo (mohlala, a <div>goba <img>). Ditaele di dirišwa go tšwa ka .ratioklaseng ya motswadi thwii go ngwana.

Ditekanyo tša dikarolo di tsebagatšwa ka mmapeng wa Sass gomme di akaretšwa ka klaseng ye nngwe le ye nngwe ka phetogo ya CSS, yeo gape e dumelelago dikarolwana tša dikarolo tša tlwaelo .

Pro-Keletšo! Ga o hloke frameborder="0"go s ya gago <iframe>ka ge re go tloša seo ka go Reboot .

Mohlala

Phuthelela go tsenya efe goba efe, go swana le <iframe>, ka gare ga elemente ya motswadi ka .ratiole sehlopha sa tekanyo ya dikarolo. Elemente ya ngwana wa ka pela e lekanyeditšwe ka go iketla ka lebaka la mokgethi wa rena wa bokahohleng .ratio > *.

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

Ditekanyo tša dikarolo

Ditekanyo tša dikarolo di ka rulaganywa ka dihlopha tša sefetoši. Ka go ikemela diklase tše di latelago tša tekanyo di a fiwa:

1x1 e le

4x3 e le

16x9 e le

21x9 e le

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

Ditekanyo tša tlwaelo

Sehlopha se sengwe le se sengwe .ratio-*se akaretša thepa ya tlwaelo ya CSS (goba phetogo ya CSS) ka go mokgethi. O ka tloša phetogo ye ya CSS go hlama ditekanyo tša dikarolo tša tlwaelo ka go fofa ka dipalo tše dingwe tša ka pela ka lehlakoreng la gago.

Go fa mohlala, go hlama tekanyo ya mahlakore ya 2x1, bea --bs-aspect-ratio: 50%godimo ga .ratio.

2x1 e le

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Phetogo ye ya CSS e dira gore go be bonolo go fetoša tekanyo ya dikarolo go ralala le dintlha tša go kgaotša. Se se latelago ke 4x3 go thoma, eupša se fetoga go 2x1 ya tlwaelo ka ntlha ya go kgaotša ya magareng.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, ke moka 2x1

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

Mmapa wa Sass

Ka gare ga _variables.scss, o ka fetoša ditekanyo tša dikarolo tšeo o nyakago go di diriša. $ratio-aspect-ratiosMmapa wa rena wa go se fetoge ke wo. Fetoša mmapa ka moo o ratago gomme o kgoboketše gape Sass ya gago gore o di šomiše.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);