Raportet
Përdorni pseudo elementë të krijuar për të bërë që një element të ruajë raportin e pamjes që keni zgjedhur. E përkryer për trajtimin e përgjegjshëm të videove ose futjeve të shfaqjeve rrëshqitëse bazuar në gjerësinë e prindit.
Rreth
Përdorni ndihmësin e raportit për të menaxhuar raportet e pamjes së përmbajtjes së jashtme si <iframe>
s, <embed>
s, <video>
s dhe <object>
s. Këta ndihmës mund të përdoren gjithashtu në çdo element standard të fëmijës HTML (p.sh., a <div>
ose <img>
). Stilet aplikohen nga .ratio
klasa e prindërve drejtpërdrejt tek fëmija.
Raportet e aspektit deklarohen në një hartë Sass dhe përfshihen në secilën klasë nëpërmjet ndryshores CSS, e cila gjithashtu lejon raporte të personalizuara të pamjes .
frameborder="0"
për
<iframe>
s tuaj pasi ne e anashkalojmë atë për ju në
Reboot .
Shembull
Mbështilleni çdo futje, si një <iframe>
, në një element prind me .ratio
dhe një klasë të raportit të pamjes. Elementi i menjëhershëm i fëmijës përmasohet automatikisht falë përzgjedhësit tonë universal .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Raportet e aspektit
Raportet e aspektit mund të personalizohen me klasa modifikuese. Si parazgjedhje ofrohen klasat e mëposhtme të raportit:
<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>
Raportet e personalizuara
Çdo .ratio-*
klasë përfshin një pronë të personalizuar CSS (ose variabël CSS) në përzgjedhës. Ju mund ta anashkaloni këtë variabël CSS për të krijuar raporte të personalizuara të pamjes menjëherë me disa matematikë të shpejtë nga ana juaj.
Për shembull, për të krijuar një raport aspekti 2x1, vendoseni --bs-aspect-ratio: 50%
në .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Kjo variabël CSS e bën të lehtë modifikimin e raportit të pamjes nëpër pikat e ndërprerjes. Më poshtë është 4x3 për të filluar, por ndryshon në një 2x1 të personalizuar në pikën mesatare të ndërprerjes.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Harta Sass
Brenda _variables.scss
, ju mund të ndryshoni raportet e pamjes që dëshironi të përdorni. $ratio-aspect-ratios
Këtu është harta jonë e paracaktuar . Modifikoni hartën sipas dëshirës dhe ripërpiloni Sass-in tuaj për t'i vënë në përdorim.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);