objectFit స్టైల్ లక్షణం

课程表

JS 参考手册

JavaScript

Window

HTML DOM

Web API

HTML ఆబ్జెక్ట్

</a></li> <li><a href="/te/jsref/dom_obj_time.html" title="HTML DOM Time ఆబ్జెక్ట్"><time></a></li> <li><a href="/te/jsref/dom_obj_title.html" title="HTML DOM Title ఆబ్జెక్ట్"><title></a></li> <li><a href="/te/jsref/dom_obj_track.html" title="HTML DOM Track ఆబ్జెక్ట్"><track></a></li> <li><a href="/te/jsref/dom_obj_u.html" title="HTML DOM Underline ఆబ్జెక్ట్"><u></a></li> <li><a href="/te/jsref/dom_obj_ul.html" title="HTML DOM Ul ఆబ్జెక్ట్"><ul></a></li> <li><a href="/te/jsref/dom_obj_var.html" title="HTML DOM Variable ఆబ్జెక్ట్"><var></a></li> <li><a href="/te/jsref/dom_obj_video.html" title="HTML DOM Video ఆబ్జెక్ట్"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/te/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ఆబ్జెక్ట్">CSSStyleDeclaration</a></li> <li><a href="/te/jsref/jsref_type_conversion.html" title="JavaScript రకం మార్పు">JS రకం మార్పు</a></li> </ul> </div> <div><h3><center> ఎక్స్ట్రా కోర్సులు </center><h3> <h2>కోర్సు సిఫార్సులు:</h2> <ul> <li><a href="/te/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>objectFit స్టైల్ లక్షణం</h1> <div class="prenextnav-ref"> <ul> <li> ముంది పేజీ <a href="/te/jsref/prop_style_minwidth.html" title="Style minWidth లక్షణం">minWidth</a></li> <li> తరువాతి పేజీ <a href="/te/jsref/prop_style_objectposition.html" title="Style objectPosition లక్షణం">objectPosition</a></li> <li> పైకి తిరిగి <a href="/te/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="/te/css/css3_object-fit.html" title="CSS object-fit లక్షణం">CSS object-fit</a></p> <p>CSS సూచనాల పట్టిక<a href="/te/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="/te/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="/te/cssref/css_initial.html" title="CSS initial కీలక పదం">initial</a>.</td> </tr> <tr> <td>inherit</td> <td>తన పైబడిన భాగం నుండి ఈ లక్షణాన్ని పారదర్శకంగా ఉంచుతుంది. చూడండి <a href="/te/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="/te/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="/te/jsref/prop_style_minwidth.html" title="Style minWidth లక్షణం">minWidth</a></li> <li> తరువాతి పేజీ <a href="/te/jsref/prop_style_objectposition.html" title="Style objectPosition లక్షణం">objectPosition</a></li> <li> పైకి తిరిగి <a href="/te/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="/te/jsref/index.html">జావాస్క్రిప్ట్ అండ్ హెచ్టిఎంఎల్ డామిన్ రిఫరెన్స్ మ్యాన్యువల్</a></h5> <h5 id="tools_example"><a href="/te/js/js_examples.html">JavaScript ఉదాహరణలు</a></h5> <h5 id="tools_quiz"><a href="/te/js/js_quiz.html">JavaScript పరీక్ష</a></h5> <h5 id="tools_tutorial"><a href="/te/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="/te/about/index.html" title="గురించి CodeW3C.com">గురించి CodeW3C.com</a> <a href="/te/about/about_helping.html" title="సహాయం CodeW3C.com">సహాయం CodeW3C.com</a> <a href="/te/about/about_use.html" title="ఉపయోగం గురించి">ఉపయోగ నిబంధనలు</a> <a href="/te/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>