in English

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.

Kuleli khasi

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 .ratioekilasini labazali ngqo enganeni.

Ukubukeka kwezilinganiso kumenyezelwa kumephu ye-Sass futhi kufakwe ekilasini ngalinye ngokuhlukahluka kwe-CSS, okuvumela futhi ukubukeka kwezilinganiso ngokwezifiso .

I-Pro-Tip! Awudingi frameborder="0"ku- <iframe>s yakho njengoba sibhala ngaphezulu lokho kwakho ekuqaliseni kabusha .

Isibonelo

Goqa noma yikuphi ukushumeka, njenge- <iframe>, ku-elementi yomzali .ratiokanye nesigaba se-aspect ratio. I-elementi yengane esheshayo ilinganiswa ngokuzenzakalelayo ngenxa yesikhethi sethu samazwe ngamazwe .ratio > *.

html

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

1x1

4x3

16x9

21x9

html

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

2x1

html

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

4x3, bese 2x1

html

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

Sass imephu

Ngaphakathi _variables.scss, ungashintsha i-aspect ratios ofuna ukuyisebenzisa. $ratio-aspect-ratiosNali 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%)
);