အချိုးအစား

အကြောင်း

<iframe>s၊ <embed>s၊ <video>s နှင့် s ကဲ့သို့သော ပြင်ပအကြောင်းအရာများ၏ အချိုးအစားများကို စီမံခန့်ခွဲရန် အချိုးအကူကို အသုံးပြုပါ <object>။ ဤအကူအညီများကို မည်သည့်စံ HTML ကလေးဒြပ်စင် (ဥပမာ၊ a <div>သို့မဟုတ် <img>) တို့တွင်လည်း အသုံးပြုနိုင်ပါသည်။ စတိုင်များကို မိဘ .ratioအတန်းမှ ကလေးသို့ တိုက်ရိုက်အသုံးပြုသည်။

အချိုးအစားများကို Sass မြေပုံတွင် ကြေငြာပြီး CSS variable မှတစ်ဆင့် အတန်းတစ်ခုစီတွင် ပါဝင်သော၊ စိတ်ကြိုက်ရှုထောင့်အချိုး များကိုလည်း ခွင့်ပြုသည် ။

ဥပမာ

<iframe>ပင်မဒြပ်စင်တစ်ခုနှင့် .ratioရှုထောင့်အချိုးအတန်း တစ်ခု ကဲ့သို့ မြှုပ်နှံမှုတစ်ခုခုကို ခြုံပါ ။ ကျွန်ုပ်တို့၏ universal selector ကြောင့် ချက်ချင်းကလေးဒြပ်စင်သည် အလိုအလျောက်အရွယ်အစား .ratio > *ရှိသည်။

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

အချိုးအစား

အချိုးအစားများကို ပြုပြင်မွမ်းမံထားသော အတန်းများဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ ပုံမှန်အားဖြင့် အောက်ပါအချိုးအတန်းများကို ပေးသည်-

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

စိတ်ကြိုက်အချိုးများ

အတန်း တစ်ခုစီ .ratio-*တွင် ရွေးချယ်သည့်ကိရိယာတွင် CSS စိတ်ကြိုက်ပိုင်ဆိုင်မှု (သို့မဟုတ် CSS ပြောင်းလဲနိုင်သော) ပါဝင်သည်။ သင့်ဘက်မှ အမြန်သင်္ချာဖြင့် စိတ်ကြိုက်အချိုးအစားများကို ဖန်တီးရန်အတွက် ဤ CSS ကိန်းရှင်ကို အစားထိုးနိုင်သည်။

ဥပမာအားဖြင့်၊ 2x1 အချိုးကိုဖန်တီးရန်၊ --bs-aspect-ratio: 50%ပေါ်တွင် သတ်မှတ်ပါ .ratio။

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

ဤ CSS variable သည် breakpoints များတစ်လျှောက် ရှုထောင့်အချိုးကို ပြင်ဆင်ရန် လွယ်ကူစေသည်။ အောက်ပါသည် စတင်ရန် 4x3 ဖြစ်သည်၊ သို့သော် ကြားခံဖြတ်မှတ်တွင် စိတ်ကြိုက် 2x1 သို့ ပြောင်းသည်။

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

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

Sass မြေပုံ

အတွင်းတွင် _variables.scssသင်သည် သင်အသုံးပြုလိုသော အချိုးအစားများကို ပြောင်းလဲနိုင်သည်။ ဤသည်မှာ ကျွန်ုပ်တို့၏ မူရင်း $ratio-aspect-ratiosမြေပုံဖြစ်သည်။ မြေပုံကို သင်နှစ်သက်သလို မွမ်းမံပြင်ဆင်ပြီး ၎င်းတို့ကို အသုံးပြုနိုင်ရန် သင်၏ Sass ကို ပြန်လည်စုစည်းပါ။

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