စီစ်တက် object-position သုံးစွဲ

CSS object-position img သို့မဟုတ် video ကို အကွင်းအပိုင်းတွင် နေရာအချိန်ချိန်တွင် အသုံးပြုပါ

ဗီယိုင်စင်

ကျွန်တော်တို့သည် ဘိုးဟန်မြို့မှ လာခဲ့သော ဗီယိုင်စင်ကို အသုံးပြုပါမည်၊ ဗီယိုင်စင်အစားအဆင့် 600x400 ပမာဏ

နောက်ပိုင်းတွင် ကျွန်တော်တို့သည် အသုံးပြုပါမည် object-fit: cover; ဗီယိုင်စင်၏ အစိတ်အပိုင်းကို သို့မဟုတ် အဆင့်ကို သုံးစွဲသွားသော ဗီယိုင်စင်ကို တစ်ဆင်းစင်းအရေအတွက် တွက်ချက်ထားပါ

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

亲自试一试

object-position ဗီယိုင်စင်အရင်းအမြစ်

ပြသထားသော ဗီယိုင်စင်အစိတ်အပိုင်းသည် ကျွန်တော်တို့စိုးရိမ်သော နေရာမှာ မဟုတ်ဘဲဖြစ်ခဲ့သော်လည်း၊ ဗီယိုင်စင်ကို တည်ထားရန် ကျွန်တော်တို့သည် အသုံးပြုပါမည် object-position ဗီယိုင်စင်အရင်းအမြစ်

ဒီနေရာမှာ၊ ကျွန်တော်တို့သည် အသုံးပြုပါမည် object-position ဗီယိုင်စင်အရင်းအမြစ်ကို အရှိန်တစ်ထိုးမှ သို့ တည်ထားပါ

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

亲自试一试

ဒီနေရာမှာ၊ ကျွန်တော်တို့သည် အသုံးပြုပါမည် object-position 属性来定位图像，使著名的紫禁城角楼位于右侧：

实例

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

亲自试一试

CSS object-* 属性

下表列出了 CSS object-* 属性：

属性	描述
object-fit	指定 或
object-position	指定 或