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.

Në këtë faqe

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

Pro-Tip! Ju nuk keni nevojë 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 .ratiodhe 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:

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>

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.

2x1

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

4x3, pastaj 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-ratiosKë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%)
);