Rabo
Yi amfani da abubuwan ƙirƙira don sanya kashi ya kula da yanayin zaɓin ku. Cikakke don sarrafa bidiyo ko nunin faifai cikin rahusa dangane da faɗin iyaye.
Game da
Yi amfani da mataimakan rabo don sarrafa ma'auni na abun ciki na waje kamar <iframe>
s, <embed>
s, <video>
s, da <object>
s. Hakanan za'a iya amfani da waɗannan mataimakan akan kowane ƙa'idar HTML na yara (misali, a <div>
ko <img>
). Ana amfani da salo daga .ratio
ajin iyaye kai tsaye ga yaro.
Ana bayyana ma'auni a cikin taswirar Sass kuma an haɗa su a cikin kowane aji ta hanyar CSS m, wanda kuma yana ba da damar ma'auni na al'ada .
frameborder="0"
akan
<iframe>
s ɗin ku yayin da muke soke hakan a gare ku a cikin
Sake yi .
Misali
Kunna duk wani abin da aka saka, kamar <iframe>
, a cikin kashi na iyaye tare .ratio
da ajin rabon al'amari. Ana yin girman kashi na kai tsaye ta atomatik godiya ga mai zaɓinmu na duniya .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Matsakaicin yanayin
Za a iya keɓance ma'auni na al'amari tare da azuzuwan masu gyara. Ta tsohuwa ana ba da azuzuwan rabo masu zuwa:
<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>
Adadin al'ada
Kowane .ratio-*
aji ya haɗa da kayan al'ada na CSS (ko CSS m) a cikin mai zaɓi. Kuna iya soke wannan canjin CSS don ƙirƙirar yanayin al'ada na al'ada akan tashi tare da wasu lissafi mai sauri a ɓangaren ku.
Misali, don ƙirƙirar juzu'i 2x1, saita --bs-aspect-ratio: 50%
akan .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Wannan madaidaicin CSS yana sauƙaƙa don gyaggyara ma'auni tsakanin ma'auni. Mai zuwa shine 4x3 don farawa, amma yana canzawa zuwa al'ada 2x1 a matsakaicin hutu.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass map
A ciki _variables.scss
, zaku iya canza yanayin yanayin da kuke son amfani da shi. $ratio-aspect-ratios
Ga taswirar mu ta asali . Gyara taswirar yadda kuke so kuma sake tattara Sass ɗin ku don amfani da su.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);