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