CSS object-position एट्रिब्यूट

CSS object-position पैरामीटर का इस्तेमाल <img> या <video> को उसके कंटेनर में कहाँ स्थापित करने के लिए किया जाता है。

छवि

यहाँ देखें, वैनाकोय के इस छवि को, आकार 600x400 पिक्सल:

वुहान

अगले चरण में, हम इस्तेमाल करेंगे object-fit: cover; को इस्तेमाल करके चौड़ाई और ऊंचाई को भरने के लिए रखा जाएगा और छवि को काटा जाएगा ताकि इसे इस तरह अनुकूलित किया जा सके:

वुहान

इनस्टैंस

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

स्वयं दोहराएं

object-position पैरामीटर

अगर प्रदर्शित छवि का हिस्सा हमारे चाहते के स्थान पर नहीं है, तो छवि को स्थापित करने के लिए हम इस्तेमाल करेंगे object-position पैरामीटर。

यहाँ, हम इस्तेमाल करेंगे object-position पैरामीटर का इस्तेमाल करके छवि को सेंटर में स्थापित करने के लिए जुनी इमारतों को केंद्र में रखा जाएगा:

वुहान

इनस्टैंस

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

स्वयं दोहराएं

यहाँ, हम इस्तेमाल करेंगे object-position एट्रिब्यूट को इस्तेमाल करके इमेज को स्थानांतरित करें, ताकि प्रसिद्ध चीनी फुंग सीड को दायाँ ओर रखा जा सके:}

वुहान

इनस्टैंस

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

स्वयं दोहराएं

CSS object-* एट्रिब्यूट

नीचे दिए गए तालिका में CSS object-* एट्रिब्यूट को दिखाया गया है:

एट्रिब्यूट वर्णन
object-fit सूचित करें कि <img> या <video> कैसे अपने कंटेनर को संचालित करें।
object-position सूचित करें कि <img> या <video> कैसे अपने 'स्वयं के सामग्री बॉक्स' में x/y कोणों के द्वारा स्थानांतरित किया जाना है。