object-fit ဂုဏ်သတ္တိ

object-fit ဂုဏ်သတ္တိသည် ရုပ်ပုံ သို့မဟုတ် ဗီဒီယိုကဲ့သို့သော အရာဝတ္ထုများ၏ အချိုးအစား သို့မဟုတ် အရွယ်အစားညှိခြင်းကို သတ်မှတ်ပေးသည်။

ဖွဲ့စည်းပုံ

cssselector {
  object-fit: fill သို့မဟုတ် contain သို့မဟုတ် cover သို့မဟုတ် none;
}

အောက်ပါဇယားတွင် object-fit ဂုဏ်သတ္တိအတွက် အဓိကတန်ဖိုးများကို ဖော်ပြထားသည်။

တန်ဖိုးများ

ဥပမာ

ကျွန်ုပ်တို့၏ ရုပ်ပုံအား အချိုးအစားများကို မထိန်းသိမ်းဘဲ သတ်မှတ်ထားသောအရွယ်အစားသို့ ဖြည့်စွက်ရန် သတ်မှတ်ကြပါစို့။

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

ယခု ရုပ်ပုံသည် အချိုးအစားများကို ထိန်းသိမ်းရင်း သတ်မှတ်ထားသော ကွန်တိန်နာကို ဖြည့်စွက်စေရန် ပြုလုပ်ကြပါစို့။

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

ကျွန်ုပ်တို့၏ ရုပ်ပုံသည် ၎င်း၏အချိုးအစားများကို ထိန်းသိမ်းရင်း ၎င်း၏အရွယ်အစားသည် ပြောင်းလဲသွားစေရန် သတ်မှတ်ထားသော ကွန်တိန်နာကို ဖြည့်စွက်စေကြပါစို့။

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ဥပမာ

ကျွန်ုပ်တို့၏ ရုပ်ပုံကို ၎င်း၏မူလအရွယ်အစားများကို ထိန်းသိမ်းရင်း သတ်မှတ်ထားသော ကွန်တိန်နာအတွင်း ရိုးရိုးလေးထည့်ကြပါစို့။

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

ဤအကြောင်းကိုလည်း ကြည့်ပါ