Emigerageranyo

Kozesa elementi ez’obulimba ezikoleddwa okufuula elementi okukuuma omugerageranyo gw’ebifaananyi gw’olonze. Kituufu nnyo okukwata obulungi vidiyo oba slideshow embeds okusinziira ku bugazi bw'omuzadde.

Ku muko guno

Ku

Kozesa omuyambi w’omugerageranyo okuddukanya emigerageranyo gy’ebifaananyi eby’ebirimu eby’ebweru nga <iframe>s, <embed>s, <video>s, ne <object>s. Abayambi bano era basobola okukozesebwa ku kintu kyonna eky’omwana wa HTML ekya bulijjo (okugeza, a <div>oba <img>). Emisono gikozesebwa okuva mu .ratiokibiina ky’omuzadde butereevu eri omwana.

Emigerageranyo gy’ebifaananyi gilangirirwa mu maapu ya Sass era giyingizibwa mu buli kiraasi nga giyita mu nkyukakyuka ya CSS, era ekkiriza emigerageranyo gy’ebifaananyi egy’ennono .

Pro-Amagezi! Teweetaaga frameborder="0"ku <iframe>s yo nga bwe tukusukkulumya ekyo mu Reboot .

Eky'okulabirako

Zinga embed yonna, nga <iframe>, mu elementi omuzadde ne .ratione aspect ratio class. Ekintu ky'omwana eky'amangu kiweebwa sayizi ya otomatiki olw'omusunsu waffe ow'ensi yonna .ratio > *.

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

Emigerageranyo gy’ebifaananyi (Aspect ratios).

Aspect ratios zisobola okulongoosebwa ne modifier classes. Nga bwekiba nti ebika by’omugerageranyo bino wammanga biweebwa:

1x1

4x3

16x9 nga bwe kiri

21x9 nga bwe kiri

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

Emigerageranyo gya custom

Buli .ratio-*kiraasi erimu ekintu kya CSS eky'ennono (oba enkyukakyuka ya CSS) mu kisunsula. Osobola okusazaamu enkyukakyuka eno eya CSS okukola emigerageranyo gy’ebifaananyi egy’enjawulo ku nnyonyi ng’olina okubala okw’amangu ku ludda lwo.

Okugeza, okukola omugerageranyo gw’ebifaananyi ogwa 2x1, teeka --bs-aspect-ratio: 50%ku .ratio.

2x1

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

Enkyukakyuka eno eya CSS enyanguyiza okukyusa omugerageranyo gw’ebifaananyi okuyita mu bifo eby’okumenya. Wammanga 4x3 okutandika, naye kikyuka okudda ku custom 2x1 ku medium breakpoint.

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

4x3, olwo 2x1

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

Maapu ya Sass

Mu _variables.scss, osobola okukyusa aspect ratios z’oyagala okukozesa. Wano waliwo $ratio-aspect-ratiosmaapu yaffe eya bulijjo. Kyuusa maapu nga bwoyagala era oddemu okukuŋŋaanya Sass yo okuziteeka mu nkola.

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