Style objectFit 属性

क्लास सूची

JS रेफरेंस मैनुअल

JavaScript

Window

HTML DOM

Web API

HTML ऑब्जैक्ट

</a></li> <li><a href="/hi/jsref/dom_obj_time.html" title="HTML DOM Time ऑब्जेक्ट"><time></a></li> <li><a href="/hi/jsref/dom_obj_title.html" title="HTML DOM Title ऑब्जेक्ट"><title></a></li> <li><a href="/hi/jsref/dom_obj_track.html" title="HTML DOM Track ऑब्जेक्ट"><track></a></li> <li><a href="/hi/jsref/dom_obj_u.html" title="HTML DOM Underline ऑब्जेक्ट"><u></a></li> <li><a href="/hi/jsref/dom_obj_ul.html" title="HTML DOM Ul ऑब्जेक्ट"><ul></a></li> <li><a href="/hi/jsref/dom_obj_var.html" title="HTML DOM Variable ऑब्जेक्ट"><var></a></li> <li><a href="/hi/jsref/dom_obj_video.html" title="HTML DOM Video ऑब्जेक्ट"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/hi/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ऑब्जेक्ट">CSSStyleDeclaration</a></li> <li><a href="/hi/jsref/jsref_type_conversion.html" title="JavaScript टाइप कनवर्शन">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/hi/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="/hi/jsref/prop_style_minwidth.html" title="Style minWidth गुण">minWidth</a></li> <li> अगला पृष्ठ <a href="/hi/jsref/prop_style_objectposition.html" title="Style objectPosition गुण">objectPosition</a></li> <li> एक स्तर ऊपर वापस <a href="/hi/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="/hi/css/css3_object-fit.html" title="CSS object-fit गुण">CSS object-fit</a></p> <p>CSS 参考手册：<a href="/hi/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="/hi/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="/hi/cssref/css_initial.html" title="CSS initial मुख्य शब्द">initial</a>。</td> </tr> <tr> <td>inherit</td> <td>इस गुण को उसके माता तत्व से इस गुण को अनुवर्तित करें। देखें <a href="/hi/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="/hi/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="/hi/jsref/prop_style_minwidth.html" title="Style minWidth गुण">minWidth</a></li> <li> अगला पृष्ठ <a href="/hi/jsref/prop_style_objectposition.html" title="Style objectPosition गुण">objectPosition</a></li> <li> एक स्तर ऊपर वापस <a href="/hi/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="/hi/jsref/index.html">जेसक्रिप्ट और एचटीएमएल डॉम रेफरेंस मैनुअल</a></h5> <h5 id="tools_example"><a href="/hi/js/js_examples.html">JavaScript उदाहरण</a></h5> <h5 id="tools_quiz"><a href="/hi/js/js_quiz.html">JavaScript टेस्ट</a></h5> <h5 id="tools_tutorial"><a href="/hi/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"> कोडवैसी.कॉम द्वारा प्रदान किए गए सामग्री केवल प्रशिक्षण और परीक्षण के लिए है, सामग्री की सहीता का भरोसा नहीं किया जाता।इस साइट के सामग्री का उपयोग करते समय आने वाले जोखिम कोडवैसी.कॉम से नहीं जोड़ा जाता।सभी अधिकार अभिरक्षित, सभी अधिकार रखे गए। </p> <p id="p2"> <a href="/hi/about/index.html" title="कोडवैसी.कॉम के बारे में">कोडवैसी.कॉम के बारे में</a> <a href="/hi/about/about_helping.html" title="कोडवैसी.कॉम की मदद">कोडवैसी.कॉम की मदद</a> <a href="/hi/about/about_use.html" title="उपयोग के बारे में">उपयोग शर्त</a> <a href="/hi/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>