Style objectFit 属性

အော်လက်တင်ရွက်

JS လေ့လာသတင်းကြည့်ရှု့

JavaScript

Window

HTML DOM

Web API

HTML အပိုင်း

</a></li> <li><a href="/my/jsref/dom_obj_time.html" title="HTML DOM Time အမှုသိမ်း"><time></a></li> <li><a href="/my/jsref/dom_obj_title.html" title="HTML DOM Title အမှုသိမ်း"><title></a></li> <li><a href="/my/jsref/dom_obj_track.html" title="HTML DOM Track အမှုသိမ်း"><track></a></li> <li><a href="/my/jsref/dom_obj_u.html" title="HTML DOM Underline အမှုသိမ်း"><u></a></li> <li><a href="/my/jsref/dom_obj_ul.html" title="HTML DOM Ul အမှုသိမ်း"><ul></a></li> <li><a href="/my/jsref/dom_obj_var.html" title="HTML DOM Variable အမှုသိမ်း"><var></a></li> <li><a href="/my/jsref/dom_obj_video.html" title="HTML DOM Video အမှုသိမ်း"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/my/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration အမှုသိမ်း">CSSStyleDeclaration</a></li> <li><a href="/my/jsref/jsref_type_conversion.html" title="JavaScript အမျိုးအစား ပြောင်းလဲ">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/my/howto/index.html" title="CodeW3C.com ဗဟုသုတအိမ်">CodeW3C.com ဗဟုသုတအိမ်</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Style objectFit 属性</h1> <div class="prenextnav-ref"> <ul> <li> အဆင်းပြင် စားပွဲ <a href="/my/jsref/prop_style_minwidth.html" title="Style minWidth အကိုးအကာ">minWidth</a></li> <li> နောက်ဆုံး စားပွဲ <a href="/my/jsref/prop_style_objectposition.html" title="Style objectPosition အကိုးအကာ">objectPosition</a></li> <li> အဆင်းပြင် ပြန်သတ် <a href="/my/jsref/dom_obj_style.html" title="HTML DOM Style အပေါင်း">HTML DOM Style အပေါင်း</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>objectFit</code> 属性用于规定应如何调整 <img> 或 <video> 的大小以适合其容器。</p> <p>该属性告诉内容以多种方式填充容器；例如“保持该高宽比”或“伸展并尽可能多地占用空间”。</p> <h3>另请参阅：</h3> <p>CSS 教程：<a href="/my/css/css3_object-fit.html" title="CSS object-fit အကိုးအကာ">CSS object-fit</a></p> <p>CSS 参考手册：<a href="/my/cssref/pr_object-fit.html" title="CSS object-fit အကိုးအကာ">object-fit အရေးသား</a></p> </div> <div> <h2>实例</h2> <p>切掉图像的两侧，保留高宽比，并填充空间：</p> <pre class="language-js"> document.getElementById("myImg").style.objectFit = "cover"; </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=jsck_style_objectfit">亲自试一试</a></p> </div> <div> <h2>语法</h2> <p>objectFit အရေးသား ပြန်လည်ပေးပါ:</p> <pre><i>object</i>.style.objectFit</pre> <p>objectFit အရေးသား ကို သတ်မှတ်ပါ:</p> <pre><i>object</i>.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"</pre> <h3>အရေးသား အမှတ်</h3> <table class="dataintable"> <tr> <th style="width: 25%;">အရေးသား</th> <th>ဖော်ပြ</th> </tr> <tr> <td>fill</td> <td>မည်သည့် အရေးသား: အချင်းတွင် ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပါဝင်သော အရွိုင်း သို့ ပါဝင်သည်။ အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် အချင်းသို့ သွေးချက် မရှိပါက အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပုံစံ သို့ သွေးချက် ပြုလုပ်ပါ။</td> </tr> <tr> <td>contain</td> <td>အသုံးပြုမှု အရ အချင်းတွင် ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပုံစံ သို့ အပြောင်းလဲမှု ပြုလုပ်ပါက ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပုံစံ သို့ အပြောင်းလဲမှု ပြုလုပ်ပါ။</td> </tr> <tr> <td>cover</td> <td>အသုံးပြုမှု အရ အချင်းတွင် ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပြောင်းလဲမှု ပြုလုပ်ပါက ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပုံစံ သို့ အပြောင်းလဲမှု ပြုလုပ်ပါက ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပုံစံ သို့ ပြောင်းလဲမှု ပြုလုပ်ပါ။</td> </tr> <tr> <td>none</td> <td>အသုံးပြုမှု အရ အချင်းတွင် ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး အချင်းတွင် ပြောင်းလဲမှု မရှိပါ။</td> </tr> <tr> <td>scale-down</td> <td>အသုံးပြုမှု အရ အချင်းတွင် ပါဝင်သော အရွိုင်း သို့မဟုတ် အသေး တစ်ခုခု နှင့် အတူ တူညီပြီး နေသည်။ အဆိုပါ အရွိုင်း သို့မဟုတ် အသေး တစ်ခုခု တကြိမ် တစ်ကြိမ် သုံးစွဲခြင်း မှ ပို၍ သုံးစွဲသော အရွိုင်း သို့မဟုတ် အသေး တစ်ခုခု ဖြစ်ပါတယ်။</td> </tr> <tr> <td>initial</td> <td>အဆိုပါ အရေးသား ကို မည်သည့် အရေးသား သို့ ပြန်လည်တည်ရှိပါက မူတည်သည်။ ကျမ်းကို ကြည့်ပါ: <a href="/my/cssref/css_initial.html" title="CSS initial အကြောင်းအရာ">initial</a></td> </tr> <tr> <td>inherit</td> <td>ဖြစ်ပါတယ် အဖိုက်အဖျား အရ အဆိုပါ အရေးသား သို့ မူတည်သည်။ ကျမ်းကို ကြည့်ပါ: <a href="/my/cssref/css_inherit.html" title="CSS inherit အကြောင်းအရာ">inherit</a></td> </tr> </table> </div> <div> <h2>နည်းပညာဆိုင်ရာ အချက်</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">မည်သည့် အရေးသား:</th> <td>fill</td> </tr> <tr> <th>နိုင်ငံခြား သတင်း:</th> <td>စကားလုံး ဖြင့် အဆိုပါ အရာ၏ <a href="/my/cssref/pr_object-fit.html" title="CSS object-fit အကိုးအကာ">object-fit အရေးသား</a></td> </tr> <tr> <th>CSS အမျိုးအစား:</th> <td>CSS3</td> </tr> </table> </div> <div> <h2>ဘရာဇယာဉ် ထောက်ပံ့မှု</h2> <p>ပြင့်ဆင်သော သုတ်များ အချင်းတွင် သင်္ကေတအဖြစ် ထည့်သွင်းထားသော သုံးစွဲမှု ဖြစ်သည်။</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>31.0</td> <td>16.0</td> <td>36.0</td> <td>7.1</td> <td>19.0</td> </tr> </table> </div> <div class="prenextnav-ref"> <ul> <li> အဆင်းပြင် စားပွဲ <a href="/my/jsref/prop_style_minwidth.html" title="Style minWidth အကိုးအကာ">minWidth</a></li> <li> နောက်ဆုံး စားပွဲ <a href="/my/jsref/prop_style_objectposition.html" title="Style objectPosition အကိုးအကာ">objectPosition</a></li> <li> အဆင်းပြင် ပြန်သတ် <a href="/my/jsref/dom_obj_style.html" title="HTML DOM Style အပေါင်း">HTML DOM Style အပေါင်း</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> အက်သုံးရိုး </center><h3> <h5 id="tools_reference"><a href="/my/jsref/index.html">JavaScript နှင့် HTML DOM ဝေါဟာရ စာရင်း</a></h5> <h5 id="tools_example"><a href="/my/js/js_examples.html">JavaScript အများပြားသော အကျိုးသမား</a></h5> <h5 id="tools_quiz"><a href="/my/js/js_quiz.html">JavaScript စမ်းသပ်</a></h5> <h5 id="tools_tutorial"><a href="/my/js/index.html">JavaScript ပညာရှင်</a></h5> </div> <div><h3><center> ထောက်ပံ့ကုမ္ပဏီ ချွန်းခြည် </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com က ပြုလုပ်သော အသုံးပြုခြင်း သုံးသပ်ရေး နှင့် စာကြိုးစားခြင်း မပါဘဲ။ အမှုသိမ်းသည် အခြေခံမှ ကျရောက်သော အကြောင်းအရာ နှင့် စာကြိုးစားခြင်း မပါဘဲ။ ကုယ်စုံစိတ်ချရမည့် စာကြိုးစားခြင်း နှင့် စာကြိုးစားခြင်း မပါဘဲ။ ကုယ်စုံစိတ်ချရမည့် စာကြိုးစားခြင်း နှင့် စာကြိုးစားခြင်း မပါဘဲ။ </p> <p id="p2"> <a href="/my/about/index.html" title="အခြေခံ CodeW3C.com">အခြေခံ CodeW3C.com</a> <a href="/my/about/about_helping.html" title="အကူအညီ CodeW3C.com">အကူအညီ CodeW3C.com</a> <a href="/my/about/about_use.html" title="အသုံးပြုခြင်း အခြေခံ">အသုံးပြုခြင်း အခြေခံ</a> <a href="/my/about/about_privacy.html" title="ယူနီယံအကြောင်း">ယူနီယံအခြေခံ</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="ပြင်ဆင်သည် Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>