အချိုးအစား
ဒြပ်စင်တစ်ခုသည် သင်ရွေးချယ်သည့် အချိုးအစားကို ထိန်းသိမ်းရန် ထုတ်လုပ်ထားသော pseudo ဒြပ်စင်များကို အသုံးပြုပါ။ ပင်မ၏အကျယ်ကိုအခြေခံ၍ ဗီဒီယို သို့မဟုတ် စလိုက်ရှိုး မြှုပ်နှံမှုများကို တုံ့ပြန်ကိုင်တွယ်ရန် ပြီးပြည့်စုံသည်။
အကြောင်း
<iframe>
s၊ <embed>
s၊ <video>
s နှင့် s ကဲ့သို့သော ပြင်ပအကြောင်းအရာများ၏ အချိုးအစားများကို စီမံခန့်ခွဲရန် အချိုးအကူကို အသုံးပြုပါ <object>
။ ဤအကူအညီများကို မည်သည့်စံ HTML ကလေးဒြပ်စင် (ဥပမာ၊ a <div>
သို့မဟုတ် <img>
) တို့တွင်လည်း အသုံးပြုနိုင်ပါသည်။ စတိုင်များကို မိဘ .ratio
အတန်းမှ ကလေးသို့ တိုက်ရိုက်အသုံးပြုသည်။
အချိုးအစားများကို Sass မြေပုံတွင် ကြေငြာပြီး CSS variable မှတစ်ဆင့် အတန်းတစ်ခုစီတွင် ပါဝင်သော၊ စိတ်ကြိုက်ရှုထောင့်အချိုး များကိုလည်း ခွင့်ပြုသည် ။
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>
အချိုးအစား
အချိုးအစားများကို ပြုပြင်မွမ်းမံထားသော အတန်းများဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ ပုံမှန်အားဖြင့် အောက်ပါအချိုးအတန်းများကို ပေးသည်-
<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%)
);