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
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 .ratio
kibiina 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 .
Eky'okulabirako
Zinga embed yonna, nga <iframe>
, mu elementi omuzadde ne .ratio
ne 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:
<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
.
<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
}
}
<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-ratios
maapu 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%)
);