सीएसएस वस्तु-स्थिति संपत्ति
CSS object-positionगुण का उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि एक <img> या <video> को उसके कंटेनर में कैसे रखा जाना चाहिए।
छवि
पेरिस की निम्न छवि देखें, जो 400x300 पिक्सेल की है:
अगला, हम object-fit: cover;पहलू अनुपात रखने और दिए गए आयाम को भरने के लिए उपयोग करते हैं। हालांकि, छवि को फिट करने के लिए क्लिप किया जाएगा, जैसे:
उदाहरण
img {
width: 200px;
height:
300px;
object-fit: cover;
}
वस्तु-स्थिति संपत्ति का उपयोग करना
मान लीजिए कि छवि का जो हिस्सा दिखाया गया है, वह वैसा नहीं है जैसा हम चाहते हैं। छवि की स्थिति के लिए, हम object-positionसंपत्ति का उपयोग करेंगे।
यहां हम object-positionसंपत्ति का उपयोग छवि को स्थापित करने के लिए करेंगे ताकि महान पुरानी इमारत केंद्र में हो:
उदाहरण
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
यहां हम object-positionसंपत्ति का उपयोग छवि को स्थापित करने के लिए करेंगे ताकि प्रसिद्ध एफिल टॉवर केंद्र में हो:
उदाहरण
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
सीएसएस ऑब्जेक्ट-* गुण
निम्न तालिका CSS ऑब्जेक्ट-* गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |