အပြုအမူပြုတ်တ် - အပြန်အလွှမ်း Iframe

အပြန်အလွှမ်း အင်တာဗျူး ကို ပြုလုပ်ရန် ပုံစံ CSS ကို သင်ကြားပါ

အပြန်အလွှမ်း အင်တာဗျူး

အနှံ့အစိတ် ကို ကျော်ကြားပေးသည်၊ အနှံ့အစိတ် (4:3, 16:9 တို့) ဖြင့် အင်တာဗျူး ကို ဖန်တီးပါ

အနှံ့အစိတ် ဆိုသည်မှာ အားလုံး မှာ အကျယ် နှင့် အမြင့် အကြား ကြားယူနှုန်း ဖြစ်သည်。

အဆိုပါ အစီအစဉ်၏ အနှံ့အစိတ် သည် သူ၏ အကျယ် နှင့် အမြင့် အကြား ကြားယူနှုန်း ဖြစ်သည်။ အခြား အခြား အကြောင်းကြောင်းများ အနှံ့အစိတ် သည် 4:3 (တတိယ ရောမ ဗွီဒီယို ပုံစံ) နှင့် 16:9 (အရေးပါ အမြင့် ဗွီဒီယို ပုံစံ နှင့် ဥရောပ ဒီဇိုင်း ဗွီဒီယို နှင့် YouTube ဗွီဒီယို ပုံစံ) ဖြစ်သည်。

How To - အပြန်အလွှမ်း အင်တာဗျူး

ပထမအဆင့် - ပုံစံ HTML ထပ်ပေးပါ

အပေါ်လွှတ်တန်း အစီအစဉ်ကို အသုံးပြုပြီး အင်တာဗျူးကို ထိန်းသိမ်းပါ

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

ဒုတိယအဆင့် - ပုံစံ CSS ထပ်ပေးပါ

အတွက် padding-top အပိုင်းအချိန် ပြုလုပ်သည်၊ အပေါ်လွှတ်တန်း အတူ အနှံ့အစိတ် ကို ကျော်ကြားပေးသည်။ အောက်ပါ အကြောင်းကြောင်းများ တွင် 16:9 အနှံ့အစိတ် ဖြင့် အပေါ်လွှတ်တန်း ကို ဖန်တီးပြီး မှတ်ချက်ပြုပြီး ဖြစ်သည်။ ဤ အနှံ့အစိတ် သည် YouTube ဗွီဒီယို ရဲ့ အတူ အနှံ့အစိတ် ဖြစ်သည်。

အကြောင်း - 16:9 အနှံ့အစိတ်

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 အနှံ့အစိတ် (9 ကို 16 ဖြင့် အပိုင်းပေါင်း 0.5625) */

/* နောက်ပိုင်းတွင် အင်တာဗျူးအစီအစဉ်ကို ဖော်ပြသည်၊ အင်တာဗျူးကို အပေါ်လွှတ်တန်းနှင့် အတူ အနှံ့အစိတ် ဖြင့် အပေါ်လွှတ်တန်းကို အတူ ပြောင်းလဲသွားစေသည် */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;

亲自试一试

အခြား အနှံ့အစိတ်

အကြောင်း - 4:3 အနှံ့အစိတ်

.container {
  padding-top: 75%; /* 4:3 အနှံ့အစိတ် */

亲自试一试

အကြောင်း - 3:2 အနှံ့အစိတ်

.container {
  padding-top: 66.66%; /* 3:2 အနှံ့အစိတ် */

亲自试一试

အကြောင်း - 8:5 အနှံ့အစိတ်

.container {
  padding-top: 62.5%; /* 8:5 အနှံ့အစိတ် */

亲自试一试

အကြောင်း - 1:1 အနှံ့အစိတ် (အမြင့် နှင့် အကျယ် အတူ အမြင့်နှုန်း ကို ကျော်ကြားပေးသည်)

.container {
  padding-top: 100%; /* 1:1 宽高比 */

亲自试一试