ပုံစံ objectFit Property
ဥပမာ
ပုံတစ်ပုံ၏ ဘေးနှစ်ဖက်ကို ဖြတ်၍ အချိုးအစားကို ထိန်းသိမ်းကာ နေရာလွတ်ကို ဖြည့်ပါ-
document.getElementById("myImg").style.objectFit = "cover";
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ObjectFit ပိုင်ဆိုင်မှုကို ၎င်း၏ကွန်တိန်နာနှင့် အံဝင်ခွင်ကျဖြစ်စေရန်အတွက် <img> သို့မဟုတ် <video> ကို မည်ကဲ့သို့ အရွယ်အစားပြောင်းသင့်သည်ကို သတ်မှတ်ရန် အသုံးပြုပါသည်။
ဤပိုင်ဆိုင်မှုသည် ကွန်တိန်နာကို နည်းလမ်းအမျိုးမျိုးဖြင့် ဖြည့်ရန် အကြောင်းအရာကို ပြောပြသည်။ "ထိုအချိုးအစားကို ထိန်းသိမ်းပါ" သို့မဟုတ် "ဆန့်ထုတ်ပြီး တတ်နိုင်သမျှ နေရာယူပါ" ကဲ့သို့သော၊
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
objectFit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
အထားအသို
ObjectFit ပိုင်ဆိုင်မှုကို ပြန်ပေးပါ-
object.style.objectFit
ObjectFit ကို သတ်မှတ်ပါ-
object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
fill | This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box |
cover | The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit |
none | The replaced content is not resized |
scale-down | The content is sized as if none or contain were specified (would result in a smaller concrete object size) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
နည်းပညာဆိုင်ရာအသေးစိတ်
မူလတန်ဖိုး: | ဖြည့်စွက် |
---|---|
ပြန်ပို့တန်ဖိုး- | အရာဝတ္ထုတစ်ခု၏ အံဝင်ခွင်ကျမှုကို ကိုယ်စားပြုသော စာကြောင်းတစ်ခု |
CSS ဗားရှင်း | CSS3 |
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS object-fit
CSS ရည်ညွှန်းချက်- object-fit ပိုင်ဆိုင်မှု
❮ စတိုင်အရာဝတ္ထု