CSS object-fit Property
ဥပမာ
ပုံတစ်ပုံ၏ ဘေးနှစ်ဖက်ကို ဖြတ်၍ အချိုးအစားကို ထိန်းသိမ်းကာ နေရာလွတ်ကို ဖြည့်ပါ-
img.a {
width: 200px;
height:
400px;
object-fit: cover;
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
object-fit
<img> သို့မဟုတ် <video> ကို ၎င်း၏ကွန်တိန်နာနှင့် အံဝင်ခွင်ကျဖြစ်စေရန် အရွယ်အစားကို သတ်မှတ်ရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည် ။
ဤပိုင်ဆိုင်မှုသည် ကွန်တိန်နာကို နည်းလမ်းအမျိုးမျိုးဖြင့် ဖြည့်ရန် အကြောင်းအရာကို ပြောပြသည်။ "ထိုအချိုးအစားကို ထိန်းသိမ်းထားပါ" သို့မဟုတ် "ဆန့်ထုတ်ပြီး တတ်နိုင်သမျှ နေရာယူပါ" ကဲ့သို့သော။
မူလတန်ဖိုး: | တစ်ဦးချင်းဂုဏ်သတ္တိများကိုကြည့်ပါ။ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.objectFit="ဖုံး" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS Syntax
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Try it |
---|---|---|
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 သင်ခန်းစာ- CSS object-fit
CSS ရည်ညွှန်းချက်- CSS အရာဝတ္ထု-အနေအထား
HTML DOM ရည်ညွှန်း- objectFit ပိုင်ဆိုင်မှု