Arányok

Használjon generált pszeudoelemeket, hogy egy elem megtartsa az Ön által választott képarányt. Tökéletes video- vagy diavetítés-beágyazások reszponzív kezelésére a szülő szélessége alapján.

Ezen az oldalon

Ról ről

Az aránysegéd segítségével kezelheti a külső tartalmak (például <iframe>s, <embed>s, <video>s és <object>s) képarányát. Ezek a segítők is használhatók bármely szabványos HTML gyermekelemen (pl. a <div>vagy <img>). A stílusokat a szülő .ratioosztály közvetlenül a gyermekre alkalmazza.

A képarányok egy Sass-térképen vannak deklarálva, és az egyes osztályokban CSS-változón keresztül szerepelnek, amely lehetővé teszi az egyéni képarányok használatát is .

Profi tipp! Nincs szüksége frameborder="0"az <iframe>s-re, mivel ezt felülírjuk az Újraindításban .

Példa

Bármely beágyazást, például egy <iframe>, egy szülőelembe csomagolja a .ratioés a képarány-osztállyal. Az azonnali gyermekelem az univerzális választónknak köszönhetően automatikusan méretre kerül .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Képarányok

A képarányok testreszabhatók a módosító osztályokkal. Alapértelmezés szerint a következő arányosztályok állnak rendelkezésre:

1x1

4x3

16x9

21x9

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

Egyedi arányok

Minden .ratio-*osztály tartalmaz egy egyéni CSS-tulajdonságot (vagy CSS-változót) a szelektorban. Felülírhatja ezt a CSS-változót, hogy menet közben egyéni képarányokat hozzon létre, némi gyors matematikai művelettel.

Például 2x1 képarány létrehozásához állítsa --bs-aspect-ratio: 50%be a .ratio.

2x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Ez a CSS-változó megkönnyíti a töréspontok képarányának módosítását. Kezdésként a következő 4x3, de a közepes töréspontnál egyéni 2x1-re változik.

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

4x3, majd 2x1

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

Sass térkép

Ezen belül _variables.scssmódosíthatja a használni kívánt képarányokat. Itt van az alapértelmezett $ratio-aspect-ratiostérképünk. Módosítsa a térképet tetszés szerint, és fordítsa újra a Sass-t, hogy használni tudja őket.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);