Rapò

Sèvi ak eleman pseudo pwodwi pou fè yon eleman kenbe rapò aspè ou chwazi a. Pafè pou reponn ak repons manyen videyo oswa diaporama embeds ki baze sou lajè a nan paran an.

Nan paj sa a

Konsènan

Sèvi ak èd rapò a pou jere rapò aspè nan kontni ekstèn tankou <iframe>s, <embed>s, <video>s, ak <object>s. Èd sa yo ka itilize tou sou nenpòt eleman HTML estanda (pa egzanp, a <div>oswa <img>). Styles yo aplike nan klas paran .ratioan dirèkteman nan timoun nan.

Rapò aspè yo deklare nan yon kat Sass epi yo enkli nan chak klas atravè CSS varyab, ki pèmèt tou rapò aspè koutim .

Pro-Tip! Ou pa bezwen frameborder="0"sou <iframe>s ou jan nou pase sou tèt sa pou ou nan Reboot .

Egzanp

Anvlope nenpòt ki embed, tankou yon <iframe>, nan yon eleman paran .ratioak yon klas rapò aspè. Eleman pitit imedya a otomatikman gwosè gras a seleksyon inivèsèl nou an .ratio > *.

html

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

Rapò aspè yo

Rapò aspè yo ka Customized ak klas modifye. Pa default klas rapò sa yo bay:

1x1

4x3

16x9

21x9

html

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

Rapò koutim

Chak .ratio-*klas gen ladan yon pwopriyete koutim CSS (oswa CSS varyab) nan seleksyon an. Ou ka pase sou plas varyab CSS sa a pou kreye rapò aspè koutim sou vole ak kèk matematik rapid sou pati ou.

Pa egzanp, pou kreye yon rapò aspè 2x1, mete --bs-aspect-ratio: 50%sou .ratio.

2x1

html

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

Varyab CSS sa a fè li fasil pou modifye rapò aspè yo atravè pwen rupture yo. Sa ki anba la a se 4x3 yo kòmanse, men chanjman nan yon koutim 2x1 nan pwen rupture mwayen an.

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

4x3, Lè sa a, 2x1

html

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

Sass kat jeyografik

Nan _variables.scss, ou ka chanje rapò aspè ou vle itilize yo. Isit la nan kat default nou an $ratio-aspect-ratios. Modifye kat la jan ou renmen epi rekonpile Sass ou a pou itilize yo.

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