CSS aspect-ratio 属性

定义和用法

aspect-ratio 属性允许您定义元素的宽度和高度之间的比例。

如果设置了 aspect-ratio 和 width 属性，高度将按照定义的长宽比进行调整。

为了更好地理解 aspect-ratio 属性，请查看演示。

提示：在响应式布局中使用 aspect-ratio 属性，当元素的大小经常变化时，您希望保持宽度与高度之间的比例。

အမှတ်

အမှတ် 1

အချက်အလက် ကို ပြုလုပ်ခြင်း

div {
  aspect-ratio: 3 / 2;
}

ကိုယ်တိုင် စစ်ဆေးခြင်း

အမှတ် 2

div အချက်အလက် သည် ပြဿနာ သို့ ပြောင်းလဲသွားခြင်း ဖြစ်သည်ကို သတ်မှတ်သည်aspect-ratio အချက်အလက် သည် div အချက်အလက် ကို ပြုစုခြင်း အတွက် အခြေခံ ဖြစ်သည်။ ဥပမာ၊ ပုံပြသုံး အချက်အလက် တွင်，div အချက်အလက် သည် အားလုံး ကိရိက် ကို လုပ်ကျင်းနိုင်သော အရွယ် သတ်မှတ်သည်၊ သို့သော် ပုံ အစားအဝိုင်း ကို အစားအဝိုင်း အတိုင်း ကို ကျော်ကြော်ချက် ဖြင့် ကိုင်ချက် ပြုသည်:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>အပိုင်း</div>
  <div>လမ်းဘေး ပန်း</div>
  <div>တောင်မြင့်</div>
  <div>Cinque Terre</div>
</div>

ကိုယ်တိုင် စစ်ဆေးခြင်း

CSS ဘာသာပြန်

aspect-ratio: number/number|initial|inherit;

ဗီဇ အတိုင်း

နည်းပါး အချက်အလက်

ဘာသာပြန် အကူအညီ

အချက်အလက် စာရင်းအရ ထို သုံးဆောင်ရာ စကားလုံး သည် ထို ဗီဇ ကို ပထမဆုံး အထူး ထောက်ပံ့ ပြီး သုံးနိုင် ပြီး သုံးနိုင် သော ဘာသာပြန် ပုံစံ ကို ကိုးကားသည်。

ဆက်စပ် စာရင်း

ပြည်ထောင်စု ပြောဆိုချက်：CSS အဆိုပါ အော်ဂန်း

ညှိနှိုင်းချက်：CSS Object-fit အကိုးအချုပ်

ညှိနှိုင်းချက်：CSS Object-position အကိုးအချုပ်