အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

အချိုးအစား

ဒြပ်စင်တစ်ခုသည် သင်ရွေးချယ်သည့် အချိုးအစားကို ထိန်းသိမ်းရန် ထုတ်လုပ်ထားသော pseudo ဒြပ်စင်များကို အသုံးပြုပါ။ ပင်မ၏အကျယ်ကိုအခြေခံ၍ ဗီဒီယို သို့မဟုတ် စလိုက်ရှိုး မြှုပ်နှံမှုများကို တုံ့ပြန်ကိုင်တွယ်ရန် ပြီးပြည့်စုံသည်။

အကြောင်း

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

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

အကြံပြုချက်။ Reboot တွင် သင့်အတွက် ၎င်းကို ထပ်ရေးထားသောကြောင့် frameborder="0"သင့်တွင် သင် မလိုအပ် ပါ ။ <iframe>

ဥပမာ

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

အချိုးအစား

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

၁x၁
၄x၃
၁၆x၉
၂၁x၉
<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

၂x၁
<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
  }
}
4x3၊ ထို့နောက် 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%)
);