Suhteet

Käytä luotuja pseudoelementtejä saadaksesi elementin säilyttämään valitsemasi kuvasuhteen. Täydellinen video- tai diaesityksen upotusten reagoivaan käsittelyyn ylätason leveyden perusteella.

Tällä sivulla

Noin

Käytä suhdeapuohjelmaa ulkoisen sisällön, kuten <iframe>s, <embed>s, <video>s ja <object>s, kuvasuhteiden hallintaan. Näitä apuohjelmia voidaan käyttää myös missä tahansa tavallisessa HTML-alaelementissä (esim. a <div>tai <img>). Tyylit sovelletaan vanhempien .ratioluokasta suoraan lapseen.

Kuvasuhteet ilmoitetaan Sass-kartassa ja sisällytetään jokaiseen luokkaan CSS-muuttujan kautta, mikä mahdollistaa myös mukautetut kuvasuhteet .

Pro-Tip! Et tarvitse laitteitasi frameborder="0", <iframe>sillä ohitamme sen puolestasi Rebootissa .

Esimerkki

Kääri mikä tahansa upotus, kuten <iframe>, yläelementtiin .ratiokuvasuhdeluokalla ja. Välitön lapsielementti mitoitetaan automaattisesti yleisvalitsimen ansiosta .ratio > *.

html

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

Kuvasuhteet

Kuvasuhteita voidaan mukauttaa muokkausluokilla. Oletuksena tarjotaan seuraavat suhdeluokat:

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>

Mukautetut suhteet

Jokainen .ratio-*luokka sisältää mukautetun CSS-ominaisuuden (tai CSS-muuttujan) valitsimessa. Voit ohittaa tämän CSS-muuttujan luodaksesi mukautettuja kuvasuhteita lennossa nopean matematiikan avulla.

Jos haluat esimerkiksi luoda 2x1-kuvasuhteen, --bs-aspect-ratio: 50%aseta .ratio.

2x1

html

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

Tämän CSS-muuttujan avulla on helppo muokata kuvasuhdetta keskeytyskohtien välillä. Seuraava on 4x3 aloittaa, mutta muuttuu mukautetuksi 2x1 keskitason keskeytyskohdassa.

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

4x3, sitten 2x1

html

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

Sass kartta

Kohdassa _variables.scssvoit muuttaa kuvasuhteita, joita haluat käyttää. Tässä on oletuskartttamme $ratio-aspect-ratios. Muokkaa karttaa haluamallasi tavalla ja käännä Sassi uudelleen, jotta voit ottaa ne käyttöön.

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