Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Rêjeyên

Hêmanên pseudo yên hilberandî bikar bînin da ku hêmanek rêjeya bijareya we biparêze. Bêkêmasî ji bo birêvebirina bersivdayînê ya vîdyoyê an slideshow-ê li ser bingeha firehiya dêûbav.

Ji dor

Alîkariya rêjeyê bikar bînin da ku rêjeyên aspektê yên naveroka derveyî mîna <iframe>s, <embed>s, <video>s, û <object>s birêve bibin. Van arîkar dikarin li ser her hêmanek zarokê ya standard HTML-ê jî werin bikar anîn (mînak, a <div>an <img>). Şêwaz ji .ratioçîna dêûbav rasterast ji zarokê re têne sepandin.

Rêjeyên aspektê di nexşeyek Sass de têne ragihandin û di nav her polê de bi navgîniya guhêrbar CSS-ê ve tête navandin, ku di heman demê de rê dide rêjeyên aspektê yên xwerû .

Pro-Tip! Ji ber ku em ji bo we di Rebootframeborder="0" -ê de wê ji we re derbas dikin, hûn ne hewce ne s-ya xwe . <iframe>

Mînak

Her embedkirinekê, mîna <iframe>, di hêmanek dêûbav de bi .ratioû çînek rêjeyê ve bipêçin. Hêmana zarokê ya yekser bi saya hilbijêra meya gerdûnî bixweber mezin dibe .ratio > *.

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

Rêjeyên aspect

Rêjeyên aspektê dikarin bi çînên guhêrbar re bêne xweş kirin. Ji hêla xwerû ve dersên rêjeya jêrîn têne peyda kirin:

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>

Rêjeyên Custom

Her .ratio-*çîn di hilbijêrê de taybetmendiyek xwerû ya CSS (an guhêrbar CSS) vedigire. Hûn dikarin vê guhêrbara CSS-ê bişopînin da ku bi hin matematîkî bilez ji alîyê we ve rêjeyên taybetmendiya xwerû biafirînin.

Mînakî, ji bo afirandina rêjeyek 2x1, --bs-aspect-ratio: 50%li ser .ratio.

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

Ev guhêrbar CSS guheztina rêjeyê di nav xalên veqetandinê de hêsan dike. Ya jêrîn ji bo destpêkirinê 4x3 e, lê di xala veqetandinê ya navîn de diguhezîne 2x1ek xwerû.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
4x3, paşê 2x1
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Nexşeya Sass

Di hundurê _variables.scssde, hûn dikarin rêjeyên ku hûn dixwazin bikar bînin biguhezînin. Li vir $ratio-aspect-ratiosnexşeya meya xwerû ye. Nexşeyê wekî ku hûn dixwazin biguhezînin û Sass-a xwe ji nû ve berhev bikin da ku wan bikar bînin.

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