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.
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 .ratio
klase 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 .
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 .ratio
klasom 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:
<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
.
<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
}
}
<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-ratios
karta. 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%)
);