Reeshiyoowwan

Qaamolee sobaa uumaman fayyadamii elementiin tokko reeshiyoo aspeektii filatte akka eegu gochuuf. Bal'ina warraa irratti hundaa'uun viidiyoo ykn agarsiisa islaayidii embeds deebii kennuudhaan qabachuuf mijataa dha.

Fuula kana irratti

Waa'ee

Reeshiyoowwan aspeektii qabiyyee alaa kan akka <iframe>s, <embed>s, <video>s, fi <object>s bulchuuf gargaaraa reeshiyoo fayyadami. Gargaartoonni kun akkasumas qaama mucaa HTML istaandaardii kamiyyuu irratti fayyadamuu ni danda'u (fkn, a <div>ykn <img>). Akkaataawwan .ratiogita warraa irraa kallattiin mucaa irratti hojii irra oolu.

Reeshiyoowwan aspeektii kaartaa Sass keessatti labsamanii fi tokkoon tokkoon gita keessatti karaa jijjiiramaa CSS hammatamu, kunis reeshiyoowwan aspeektii amala hayyama .

Gorsa Deggeraa! Reboot keessatti sana waan siif irra darbinu s frameborder="0"kee irratti si hin barbaachisu . <iframe>

Fakkeenya

Embed kamiyyuu, akka <iframe>, qaama warraa keessatti .ratiofi gita reeshiyoo aspeektii keessatti marsi. Elementiin mucaa battalaa ofumaan safara galata filannoo waliigalaa keenyaa .ratio > *.

html

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

Reeshiyoowwan aspeektii

Reeshiyoowwan aspeektii gita fooyyessaa wajjin dhuunfachuun ni danda'ama. Akka durtiitti gita reeshiyoo armaan gadii ni kennama:

1x1 ta’a

4x3 ta’a

16x9 ta’a

21x9 ta’a

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>

Reeshiyoowwan gumurukaa

Tokkoon tokkoon .ratio-*gitaa qabeentaa amala CSS (ykn jijjiiramaa CSS) filannoo keessatti of keessatti qabata. Jijjiiramaa CSS kana irra darbuu dandeessa, reeshiyoowwan aspeektii amala balali'aa irratti uumuuf herrega saffisaa tokko tokkoon gama keetiin.

Fakkeenyaaf, reeshiyoo aspeektii 2x1 uumuuf, --bs-aspect-ratio: 50%irratti saagi .ratio.

2x1 ta’a

html

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

Jijjiiramaan CSS kun reeshiyoo aspeektii tuqaawwan cabbii qaxxaamuranii fooyyessuu salphisa. Kan armaan gadii jalqabuuf 4x3 dha, garuu gara amala 2x1 bakka cabbii giddugaleessaatti jijjiirama.

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

4x3, sana booda 2x1

html

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

Sass kaartaa

Keessatti _variables.scss, reeshiyoowwan aspeektii fayyadamuu barbaaddu jijjiiruu dandeessa. Kunoo $ratio-aspect-ratioskaartaan keenya durtii. Kaartaa akka barbaaddetti fooyyessii fi Sass kee irra deebi'ii qindeessii itti fayyadamuuf kaa'i.

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