လုပ်နည်း - Aspect Ratio
CSS ဖြင့် ဒြပ်စင်တစ်ခု၏ ရှုထောင့်အချိုးကို မည်သို့ထိန်းသိမ်းရမည်ကို လေ့လာပါ။
အချိုးအစား
အရွယ်အစားပြောင်းသည့်အခါ ၎င်းတို့၏ရှုထောင့်အချိုး (4:3၊ 16:9 စသည်ဖြင့်) ကို ထိန်းသိမ်းနိုင်သော ပြောင်းလွယ်ပြင်လွယ်ရှိသော အစိတ်အပိုင်းများကို ဖန်တီးပါ-
ရှုထောင့်အချိုးဆိုတာဘာလဲ။
ဒြပ်စင်တစ်ခု၏ ရှုထောင့်အချိုးသည် ၎င်း၏အနံနှင့် ၎င်း၏အမြင့်ကြား အချိုးကျဆက်စပ်မှုကို ဖော်ပြသည်။ အသုံးများသော ဗီဒီယိုအချိုးအစားနှစ်ခုမှာ 4:3 (20 ရာစု၏ universal video format) နှင့် 16:9 (universal HD ရုပ်မြင်သံကြားနှင့် ဥရောပဒစ်ဂျစ်တယ်ရုပ်မြင်သံကြား၊ နှင့် YouTube ဗီဒီယိုများအတွက် မူရင်း)။
လုပ်နည်း - အမြင့် နှင့် အနံ ညီမျှခြင်း။
အဆင့် 1) HTML ကိုထည့်ပါ
<div> ကဲ့သို့ ကွန်တိန်နာဒြပ်စင်ကို အသုံးပြုပါ၊ ၎င်းအတွင်း စာသားကို လိုချင်ပါက ကလေးဒြပ်စင်ကို ထည့်ပါ-
ဥပမာ
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
padding-top
DIV ၏ ရှုထောင့်အချိုးကို ထိန်းသိမ်းရန် အတွက် ရာခိုင်နှုန်းတန်ဖိုးကို ထည့်ပါ ။ အောက်ဖော်ပြပါ ဥပမာသည် ရှုထောင့်အချိုးအစား 1:1 (အမြင့်နှင့် အနံ အမြဲတန်းတူဖြစ်သည်)။
ဥပမာ 1:1 Aspect Ratio
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
အခြားအချိုးအစားများ
ဥပမာ 16:9 အချိုးအစား
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
ဥပမာ 4:3 Aspect Ratio
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
ဥပမာ 3:2 Aspect Ratio
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
ဥပမာ 8:5 Aspect Ratio
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}