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.

Nin ɲɛ in 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 .ratiokalanso 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 .

Pro-Tip ye! I mago tɛ 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ɔ <iframe>, bangebaga element dɔ kɔnɔ ni .ratioani 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 .

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

1x1 ye

4x3 ye

16x9 ye

21x9 ye

html ye

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

2x1 ye

html ye

<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εε bεε bεε bε Se ka bεn ka bεn bεnkanw ma. Ninnu ye 4x3 ye ka daminɛ, nka a bɛ fɛn caman Changer ka kɛ 2x1 laada ye cɛmancɛ kariyɔrɔ la.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, o kɔfɛ 2x1

html ye

<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-ratiosAn 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%)
);