Style objectFit 属性

课程表

JS 参考手册

JavaScript

Window

HTML DOM

Web API

HTML ਪ੍ਰੋਬਜੈਕਟ

</a></li> <li><a href="/pa/jsref/dom_obj_time.html" title="HTML DOM Time ਦੇ ਆਬੋਧਕ"><time></a></li> <li><a href="/pa/jsref/dom_obj_title.html" title="HTML DOM Title ਦੇ ਆਬੋਧਕ"><title></a></li> <li><a href="/pa/jsref/dom_obj_track.html" title="HTML DOM Track ਦੇ ਆਬੋਧਕ"><track></a></li> <li><a href="/pa/jsref/dom_obj_u.html" title="HTML DOM Underline ਦੇ ਆਬੋਧਕ"><u></a></li> <li><a href="/pa/jsref/dom_obj_ul.html" title="HTML DOM Ul ਦੇ ਆਬੋਧਕ"><ul></a></li> <li><a href="/pa/jsref/dom_obj_var.html" title="HTML DOM Variable ਦੇ ਆਬੋਧਕ"><var></a></li> <li><a href="/pa/jsref/dom_obj_video.html" title="HTML DOM Video ਦੇ ਆਬੋਧਕ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/pa/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ਦੇ ਆਬੋਧਕ">CSSStyleDeclaration</a></li> <li><a href="/pa/jsref/jsref_type_conversion.html" title="JavaScript ਦੇ ਟਾਈਪ ਕਨਵਰਸ਼ਨ">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/pa/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="/pa/jsref/prop_style_minwidth.html" title="Style minWidth ਪ੍ਰਤੀਯੋਗ">minWidth</a></li> <li> ਅਗਲਾ ਪੰਨਾ <a href="/pa/jsref/prop_style_objectposition.html" title="Style objectPosition ਪ੍ਰਤੀਯੋਗ">objectPosition</a></li> <li> ਉੱਪਰ ਵਾਪਸ ਜਾਓ <a href="/pa/jsref/dom_obj_style.html" title="ایچ تی ام ال ڈومن اسٹائل آوبجیکٹ">ایچ تی ام ال ڈومن اسٹائل آوبجیکٹ</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>objectFit</code> 属性用于规定应如何调整 <img> 或 <video> 的大小以适合其容器。</p> <p>该属性告诉内容以多种方式填充容器；例如“保持该高宽比”或“伸展并尽可能多地占用空间”。</p> <h3>另请参阅：</h3> <p>CSS 教程：<a href="/pa/css/css3_object-fit.html" title="CSS object-fit ਪ੍ਰਤੀਯੋਗ">CSS object-fit</a></p> <p>CSS 参考手册：<a href="/pa/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="/pa/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>ਸਮਾਨਤਾ ਦੇ ਮੁੱਲ ਨਾਲ ਸਮਾਨਤਾ ਵਿੱਚ ਸਮਾਨਤਾ ਦਾ ਮੁੱਲ ਹੈ ਜੋ ਕਿ none ਜਾਂ contain ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਉਹ ਦੋਵਾਂ ਵਿੱਚੋਂ ਜੋ ਕਿ ਘੱਟ ਹੋਵੇਗਾ ਉਸ ਦੇ ਮੁੱਲ ਨੂੰ ਲੈ ਕੇ ਹੈ।</td> </tr> <tr> <td>initial</td> <td>ਇਸ ਗੁਣ ਨੂੰ ਇਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖਣ ਲਈ ਕ੍ਰਿਪਾ ਕਰੋ: <a href="/pa/cssref/css_initial.html" title="CSS initial ਕੀਵਾਰਡ">initial</a>.</td> </tr> <tr> <td>inherit</td> <td>ਇਸ ਗੁਣ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਇਲਾਕੇ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਮਿਲਤ ਕਰ ਲਵੇ। ਦੇਖਣ ਲਈ ਕ੍ਰਿਪਾ ਕਰੋ: <a href="/pa/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="/pa/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">ਚਰੋਮ</th> <th class="bsEdge">ਐਜ਼ਡ</th> <th class="bsFirefox">ਫਾਇਰਫਾਕਸ</th> <th class="bsSafari">ਸਫਾਰੀ</th> <th class="bsOpera">ਓਪਰਾ</th> </tr> <tr> <td>ਚਰੋਮ</td> <td>ਐਜ਼ਡ</td> <td>ਫਾਇਰਫਾਕਸ</td> <td>ਸਫਾਰੀ</td> <td>ਓਪਰਾ</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="/pa/jsref/prop_style_minwidth.html" title="Style minWidth ਪ੍ਰਤੀਯੋਗ">minWidth</a></li> <li> ਅਗਲਾ ਪੰਨਾ <a href="/pa/jsref/prop_style_objectposition.html" title="Style objectPosition ਪ੍ਰਤੀਯੋਗ">objectPosition</a></li> <li> ਉੱਪਰ ਵਾਪਸ ਜਾਓ <a href="/pa/jsref/dom_obj_style.html" title="ایچ تی ام ال ڈومن اسٹائل آوبجیکٹ">ایچ تی ام ال ڈومن اسٹائل آوبجیکٹ</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="/pa/jsref/index.html">جاوا اسکریپت اور ایچ تی ام ال ڈومن مرجع دستاویز</a></h5> <h5 id="tools_example"><a href="/pa/js/js_examples.html">JavaScript ਇੰਸਟੈਂਸ</a></h5> <h5 id="tools_quiz"><a href="/pa/js/js_quiz.html">JavaScript ਟੈਸਟ</a></h5> <h5 id="tools_tutorial"><a href="/pa/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="/pa/about/index.html" title="ਬਾਰੇ CodeW3C.com">ਬਾਰੇ CodeW3C.com</a> <a href="/pa/about/about_helping.html" title="ਮਦਦ CodeW3C.com">ਮਦਦ CodeW3C.com</a> <a href="/pa/about/about_use.html" title="ਬਾਰੇ ਵਰਤੋਂ">ਵਰਤੋਂ ਸ਼ਰਤਾਂ</a> <a href="/pa/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="پاورڈ بائی سی 4 ای سی ڈومائن"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>