Rapoarte

Utilizați pseudo-elemente generate pentru a face ca un element să mențină raportul de aspect pe care îl alegeți. Perfect pentru gestionarea receptivă a înglobărilor de videoclipuri sau prezentari de diapozitive în funcție de lățimea părintelui.

Pe aceasta pagina

Despre

Utilizați ajutorul de raportare pentru a gestiona raporturile de aspect ale conținutului extern, cum ar fi <iframe>s, <embed>s, <video>s și <object>s. Acești ajutoare pot fi, de asemenea, utilizați pe orice element HTML standard (de exemplu, a <div>sau <img>). Stilurile sunt aplicate din .ratioclasa părinte direct copilului.

Raporturile de aspect sunt declarate într-o hartă Sass și incluse în fiecare clasă prin variabila CSS, care permite, de asemenea, raporturi de aspect personalizate .

Sfat pro! Nu aveți nevoie frameborder="0"de echipele dvs. <iframe>, deoarece o înlocuim pentru dvs. în Repornire .

Exemplu

Înglobați orice încorporare, cum ar fi un <iframe>, într-un element părinte cu .ratioși o clasă de raport de aspect. Elementul imediat copil este dimensionat automat datorită selectorului nostru universal .ratio > *.

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

Raport de aspect

Raporturile de aspect pot fi personalizate cu clase de modificatori. În mod implicit, sunt furnizate următoarele clase de raport:

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>

Rate personalizate

Fiecare .ratio-*clasă include o proprietate personalizată CSS (sau variabilă CSS) în selector. Puteți suprascrie această variabilă CSS pentru a crea rapoarte de aspect personalizate din mers cu niște matematici rapide din partea dvs.

De exemplu, pentru a crea un raport de aspect 2x1, setați --bs-aspect-ratio: 50%pe .ratio.

2x1

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

Această variabilă CSS facilitează modificarea raportului de aspect între punctele de întrerupere. Următorul este 4x3 pentru a începe, dar se schimbă într-un 2x1 personalizat la punctul de întrerupere mediu.

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

4x3, apoi 2x1

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

Harta Sass

În _variables.scss, puteți modifica raporturile de aspect pe care doriți să le utilizați. Iată $ratio-aspect-ratiosharta noastră implicită. Modificați harta după cum doriți și recompilați Sass-ul pentru a le folosi.

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