Izilinganiso
Sebenzisa ama-elementi mbumbulu akhiqiziwe ukuze wenze into igcine ukubukeka kwesilinganiselo ozikhethele sona. Ilungele ukuphatha ngokuphendula ividiyo noma ukushumeka kombukiso wesilayidi ngokusekelwe kububanzi bomzali.
Mayelana
Sebenzisa umsizi wesilinganiso ukuze uphathe ukubukeka kwezilinganiso zokuqukethwe kwangaphandle njengo <iframe>
-s, <embed>
s, <video>
s, no- <object>
s. Laba basizi futhi bangasetshenziswa kunoma iyiphi into evamile yengane ye-HTML (isb, a <div>
noma <img>
). Izitayela zisetshenziswa kusukela .ratio
ekilasini labazali ngqo enganeni.
Ukubukeka kwezilinganiso kumenyezelwa kumephu ye-Sass futhi kufakwe ekilasini ngalinye ngokuhlukahluka kwe-CSS, okuvumela futhi ukubukeka kwezilinganiso ngokwezifiso .
frameborder="0"
ku-
<iframe>
s yakho njengoba sibhala ngaphezulu lokho kwakho
ekuqaliseni kabusha .
Isibonelo
Goqa noma yikuphi ukushumeka, njenge- <iframe>
, ku-elementi yomzali .ratio
kanye nesigaba se-aspect ratio. I-elementi yengane esheshayo ilinganiswa ngokuzenzakalelayo ngenxa yesikhethi sethu samazwe ngamazwe .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Ukubukeka kwezilinganiso
Ukubukeka kwezilinganiso kungenziwa ngendlela oyifisayo ngamakilasi okulungisa. Ngokuzenzakalelayo amakilasi esilinganiso alandelayo anikeziwe:
<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>
Izilinganiso zangokwezifiso
Ikilasi ngalinye .ratio-*
lifaka impahla yangokwezifiso ye-CSS (noma i-CSS variable) kusikhethi. Ungakwazi ukubhala ngaphezulu lokhu kuguquguquka kwe-CSS ukuze udale izilinganiso ze-aspect yangokwezifiso lapho undiza ngezibalo ezithile ezisheshayo ngasohlangothini lwakho.
Isibonelo, ukuze udale i-aspect ratio engu-2x1, setha --bs-aspect-ratio: 50%
kokuthi .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Lokhu kuhlukahluka kwe-CSS kwenza kube lula ukulungisa ukubukeka kwesilinganiselo kuwo wonke ama-breakpoint. Okulandelayo yi-4x3 ukuqala, kodwa kushintshela ku-2x1 yangokwezifiso endaweni yokuphumula emaphakathi.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass imephu
Ngaphakathi _variables.scss
, ungashintsha i-aspect ratios ofuna ukuyisebenzisa. $ratio-aspect-ratios
Nali imephu yethu ezenzakalelayo . Shintsha imephu ngendlela othanda ngayo futhi uphinde uhlanganise ama-Sass akho ukuze uwasebenzise.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);