Omjeri

Koristite generirane pseudoelemente kako bi element zadržao omjer širine i visine po vašem izboru. Savršeno za responzivno rukovanje ugrađenim videozapisima ili dijaprojekcijama na temelju širine nadređenog.

Na ovoj stranici

Oko

Koristite pomoćnik za omjere za upravljanje omjerima širine i visine vanjskog sadržaja kao što <iframe>su s, <embed>s, <video>s i <object>s. Ovi pomoćnici također se mogu koristiti na bilo kojem standardnom HTML podređenom elementu (npr. a <div>ili <img>). Stilovi se primjenjuju iz roditeljske .ratioklase izravno na dijete.

Omjeri širine i visine deklarirani su u Sass mapi i uključeni u svaku klasu putem CSS varijable, koja također dopušta prilagođene omjere širine i visine .

Stručni savjet! Ne trebate frameborder="0"na svom <iframe>s jer mi to umjesto vas nadjačavamo u ponovnom pokretanju .

Primjer

Zamotajte bilo koje ugrađivanje, poput <iframe>, u nadređeni element s .ratioklasom omjera širine i visine. Dimenzioniranje izravnog podređenog elementa automatski se određuje zahvaljujući našem univerzalnom biraču .ratio > *.

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

Omjeri stranica

Omjeri se mogu prilagoditi klasama modifikatora. Prema zadanim postavkama predviđene su sljedeće klase omjera:

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>

Prilagođeni omjeri

Svaka .ratio-*klasa uključuje CSS prilagođeno svojstvo (ili CSS varijablu) u biraču. Možete nadjačati ovu CSS varijablu kako biste kreirali prilagođene omjere slike u hodu uz brzu matematiku s vaše strane.

Na primjer, za stvaranje omjera 2x1 postavite --bs-aspect-ratio: 50%na .ratio.

2x1

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

Ova CSS varijabla olakšava izmjenu omjera slike između prijelomnih točaka. Sljedeće je 4x3 za početak, ali se mijenja u prilagođeni 2x1 na srednjoj prijelomnoj točki.

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

4x3, zatim 2x1

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

Karta Sass

Unutar _variables.scss, možete promijeniti omjere koje želite koristiti. Ovo je naša zadana $ratio-aspect-ratioskarta. Izmijenite kartu kako želite i ponovno kompajlirajte svoje Sassove da biste ih stavili u upotrebu.

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