Ratios (jatebɔ) minnu bɛ kɛ
Baara kɛ ni pseudo elements generated ye walasa ka element dɔ kɛ aspect ratio mara i ka sugandili la. A dafalen don walasa ka wideyow walima slideshow kɔnɔfɛnw ɲɛnabɔ ni jaabi ye ka da bangebaga bonya kan.
Kan
Baara kɛ ni jatebɔ dɛmɛnan ye walasa ka kɛnɛma kɔnɔkow fanw jatebɔcogo ɲɛnabɔ i n’a fɔ <iframe>
s, <embed>
s, <video>
s, ani <object>
s. O dɛmɛnanw fana bɛ Se ka baara Kɛ ni HTML denmisɛnnin-yɔrɔ jɔnjɔn o jɔnjɔn ye (misali la, a <div>
walima <img>
). Sitiw bɛ waleya ka bɔ bangebaga ka .ratio
kalanso la ka ɲɛsin den ma.
Aspect ratios bɛ fɔ Sass karti kɔnɔ ani ka don kalasi kelen-kelen bɛɛ kɔnɔ CSS variable fɛ, o fana bɛ sira di custom aspect ratios ma .
frameborder="0"
i ka
<iframe>
s kan i n' a fɔ an bɛ o override i ye
Reboot kɔnɔ .
Misaliya
Aw bɛ embed o embed siri, i n’a fɔ an <iframe>
, bangebaga element dɔ kɔnɔ ni .ratio
ani aspect ratio class ye. den yɔrɔ min bɛ teliya la , o bɛ bonya a yɛrɛma k' a sababu kɛ an ka diɲɛ seleke naani sugandili .ratio > *
ye .
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Fɛnɲɛnɛmafagalanw (Aspect ratios).
Aspect ratios bɛ se ka ladilan ni modifier classes ye. Ka da a kan, nin ratio classes ninnu bɛ di:
<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>
Laadalata hakɛw
Kalanso kelen-kelen bɛɛ .ratio-*
bɛ CSS ladamucogo dɔ (walima CSS fɛn caman sɛgɛsɛgɛli) don sugandilikɛlan kɔnɔ. Aw bɛ se ka nin CSS fɛnsɛbɛnni in wuli ka bɔ a nɔ na walasa ka ladamucogo ɲɛfɔlenw dilan ni jatebɔ teliya dɔw ye aw fan fɛ.
Misali la, walasa ka 2x1 ɲɛ hakɛ dilan, i --bs-aspect-ratio: 50%
bɛ sigi .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
O CSS bεε b’a To a ka nɔgɔn ka aspect ratio bεε bε Yεlεma ka bεn breakpoints (bεnkanw) kan. Ninnu ye 4x3 ye ka daminɛ, nka a bɛ fɛn caman Changé ka kɛ 2x1 laada ye cɛmancɛ kariyɔrɔ la.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass ka karti
, kɔnɔ _variables.scss
, i b’a fɛ ka baara kɛ ni aspect ratios minnu ye, i bɛ se ka olu Changer. $ratio-aspect-ratios
An ka karti default filɛ nin ye . Aw bɛ karti ladilan i n’a fɔ aw b’a fɛ cogo min na ani ka aw ka Sass lajɛ kokura walasa k’u bila baara la.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);