CSS ऑब्जेक्ट फिट
Float ने मीडिया के बगल में टेक्स्ट लपेटा। object-fit एक अलग मीडिया सवाल पूछता है: जब img या video एक निश्चित आकार के फ्रेम में हो, तो सामग्री उस फ्रेम को कैसे भरे? fill से चेहरे खींचने से पहले cover और contain पर महारत हासिल करें।
एक object-fit टूलकिट
📊 Object-fit एक नज़र में
| मान | रोज़ का काम |
|---|---|
fill |
बॉक्स तक खींचें — पहलू अनुपात बिगड़ सकता है |
contain |
पूरा मीडिया अंदर फिट; खाली पट्टियाँ रह सकती हैं |
cover |
बॉक्स भरें; किनारे कट सकते हैं |
none |
आंतरिक आकार रखें; ओवरफ्लो या खाली जगह हो सकती है |
scale-down |
none या contain जैसा — जो छोटा हो |
object-position |
क्रॉप/फिट करते समय कौन-सा भाग दिखे, यह निशाना लगाता है |
object-fit तभी चमकता है जब replaced एलिमेंट की निश्चित चौड़ाई और ऊँचाई हो (या दोनों अक्ष सीमित हों)। auto ऊँचाई वाली मुक्त छवि के पास «फिट होने» का कोई फ्रेम नहीं होता।
Cover — फ्रेम भरें, क्रॉप की अनुमति
कार्ड और हीरो थंब अक्सर बॉक्स का हर पिक्सेल भरा चाहते हैं। cover बड़ा करता है और ओवरफ्लो काटता है। साफ ग्रिड के लिए चौकोर बॉक्स को cover से जोड़ें।
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — पूरी तस्वीर दिखाएँ
उत्पाद फ़ोटो और आरेख अक्सर पूरी तरह दिखने चाहिए। अनुपात अलग हों तो contain खाली पट्टियाँ (letterbox) छोड़ता है — कटा लोगो से पट्टी बेहतर है।
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill खींचता है — सावधानी से उपयोग करें
fill मीडिया को बॉक्स आकार तक मजबूर करता है भले अनुपात टेढ़े हों। अमूर्त टेक्सचर के लिए ठीक; चेहरे, लोगो और चार्ट के लिए जोखिम भरा।
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position क्रॉप का निशाना लगाता है
जब cover काटे, डिफ़ॉल्ट केंद्र चेहरा या लोगो छिपा सकता है। object-position से हिलाएँ — प्रतिशत या top और left जैसे कीवर्ड।
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
एक शांत object-fit आदत
अर्थपूर्ण मीडिया के लिए असली <img> / <video> के साथ object-fit उपयोग करें। जब छवि केवल सजावटी CSS क्रोम हो तो background-size। पहले बॉक्स नापें, cover या contain चुनें, फिर स्थिति ठीक करें।
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
खुद आज़माएँ
- छवि को निश्चित चौड़ाई-ऊँचाई दें, फिर
coverबनामcontainआज़माएँ। coverसे गोल अवतार बनाएँ औरobject-positionहिलाएँ।- एक बार
fillलगाएँ और विकृति देखें — फिर वापस जाएँ। - उसी क्रॉप की तुलना CSS
background-size: coverसजावट से करें। - एक वाक्य लिखें: contain कब cover से सुरक्षित है?
आम गलतियाँ
- बिना नापे बॉक्स के
object-fitकी उम्मीद - पोर्ट्रेट और लोगो पर
fill - इस पाठ को float रैप या position ऑफ़सेट से मिलाना
- अर्थपूर्ण फ़ोटो केवल
background-imageमें रखना (alt कठिन) - जब cover विषय छिपाए तो
object-positionभूलना
सारांश
object-fitreplaced मीडिया को नापे फ्रेम में फिट करता हैcoverभरता है और काट सकता है;containसब दिखाता है और पट्टियाँ छोड़ सकता हैfillविकृत कर सकता है — संयम से उपयोग करेंobject-positionदृश्य क्षेत्र निशाना लगाता है- सामग्री मीडिया के लिए object-fit; सजावट के लिए background-size
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी