in English

Rabo

Yi amfani da abubuwan ƙirƙira don sanya kashi ya kula da yanayin zaɓin ku. Cikakke don sarrafa bidiyo ko nunin faifai cikin rahusa dangane da faɗin iyaye.

A wannan shafi

Game da

Yi amfani da mataimakan rabo don sarrafa ma'auni na abun ciki na waje kamar <iframe>s, <embed>s, <video>s, da <object>s. Hakanan za'a iya amfani da waɗannan mataimakan akan kowane ƙa'idar HTML na yara (misali, a <div>ko <img>). Ana amfani da salo daga .ratioajin iyaye kai tsaye ga yaro.

Ana bayyana ma'auni a cikin taswirar Sass kuma an haɗa su a cikin kowane aji ta hanyar CSS m, wanda kuma yana ba da damar ma'auni na al'ada .

Pro-Tip! Ba kwa buƙatar frameborder="0"akan <iframe>s ɗin ku yayin da muke soke hakan a gare ku a cikin Sake yi .

Misali

Kunna duk wani abin da aka saka, kamar <iframe>, a cikin kashi na iyaye tare .ratioda ajin rabon al'amari. Ana yin girman kashi na kai tsaye ta atomatik godiya ga mai zaɓinmu na duniya .ratio > *.

html

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

Matsakaicin yanayin

Za a iya keɓance ma'auni na al'amari tare da azuzuwan masu gyara. Ta tsohuwa ana ba da azuzuwan rabo masu zuwa:

1 x1

4 x3

16 x9

21 x9

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>

Adadin al'ada

Kowane .ratio-*aji ya haɗa da kayan al'ada na CSS (ko CSS m) a cikin mai zaɓi. Kuna iya soke wannan canjin CSS don ƙirƙirar yanayin al'ada na al'ada akan tashi tare da wasu lissafi mai sauri a ɓangaren ku.

Misali, don ƙirƙirar juzu'i 2x1, saita --bs-aspect-ratio: 50%akan .ratio.

2 x1

html

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

Wannan madaidaicin CSS yana sauƙaƙa don gyaggyara ma'auni tsakanin ma'auni. Mai zuwa shine 4x3 don farawa, amma yana canzawa zuwa al'ada 2x1 a matsakaicin hutu.

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

4x3, sannan 2x1

html

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

Sass map

A ciki _variables.scss, zaku iya canza yanayin yanayin da kuke son amfani da shi. $ratio-aspect-ratiosGa taswirar mu ta asali . Gyara taswirar yadda kuke so kuma sake tattara Sass ɗin ku don amfani da su.

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