CSS इमेज गैलरी
ड्रॉपडाउन लिंक के नीचे मेनू घोंसला बनाते हैं। इमेज गैलरी अलग कंपोनेंट है: थंबनेल का शांत ग्रिड जिसे लोग झलक में देख सकें। थंब का आकार एक रखें, पंक्ति को wrap होने दें, object-fit से काटें, और गहरे रिस्पॉन्सिव ग्रिड अगले Flexbox और Grid मॉड्यूल पर छोड़ दें।
गैलरी टूलकिट
📊 इमेज गैलरी एक नज़र में
| टुकड़ा | रोज़ का काम |
|---|---|
| गैलरी सूची | रैपर जो थंब को रैपिंग पंक्ति या ग्रिड में रखता है |
| थंब आकार | साझा चौड़ाई/ऊँचाई ताकि सेट एक जैसा दिखे |
object-fit: cover |
थंब बॉक्स भरता है बिना बदसूरत खिंचाव के |
| Gap / margin | छवियों के बीच साँस की जगह |
| Hover संकेत | हल्का फीडबैक बिना लेआउट कूद के |
| कैप्शन | वैकल्पिक figure/figcaption अर्थ के लिए |
असली <img> तत्व उपयोगी alt टेक्स्ट के साथ इस्तेमाल करें। सिर्फ़ सजावटी स्प्राइट कहीं और हैं — गैलरी आमतौर पर कंटेंट होती है।
रैपिंग flex गैलरी
wrap वाला flex कंटेनर थंब की सूची को रिस्पॉन्सिव पंक्ति बनाता है जो अगली लाइन पर गिरती है। Gap स्पेसिंग ईमानदार रखता है।
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
साझा थंब बॉक्स + cover
हर छवि को वही बॉक्स दें, फिर cover से काटें ताकि पोर्ट्रेट और लैंडस्केप एक लय साझा करें।
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figure और कैप्शन
जब लेबल मायने रखे, छवि को figure में लपेटें और figcaption जोड़ें। थंब के नीचे कैप्शन टेक्स्ट छोटा रखें।
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
नरम hover फीडबैक
होवर पर थोड़ा डिम या ब्राइट करें। बड़े scale ट्रांसफ़ॉर्म से बचें जो पड़ोसियों को धकेल दें — जब तक आप स्टैकिंग सावधानी से न प्लान करें।
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
शांत गैलरी आदत
बराबर थंब बॉक्स, wrap + gap, object-fit: cover, अर्थपूर्ण alt। एडवांस्ड रिस्पॉन्सिव masonry के लिए अगले Flex/Grid पाठ चुनें — इसे ड्रॉपडाउन मेनू से न मिलाएँ।
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
खुद आज़माएँ
- लिंक्ड छवियों की
.galleryflex wrap सूची बनाएँ। - साझा चौड़ाई/ऊँचाई और
object-fit: coverसेट करें। - एक आइटम पर
figure/figcaptionजोड़ें। - नरम hover opacity या outline स्टाइल करें।
- एक वाक्य लिखें: Grid इस wrap स्केच से बेहतर क्या सिखाएगा?
आम गलतियाँ
- बिना साझा बॉक्स या object-fit के बेतरतीब ऊँचाई मिलाना
- शून्य gap ताकि थंब चिपक जाएँ
- गैलरी को नेस्टेड ड्रॉपडाउन मेनू जैसा समझना
- हर थंब को absolute करके नाज़ुक ढेर बनाना
- अर्थपूर्ण फ़ोटो पर खाली
alt
सारांश
- गैलरी समान थंबनेल का रैपिंग सेट है
- साझा आकार +
object-fit: coverलय साफ़ रखता है - Flex wrap + gap शांत शुरुआती लेआउट है
- कैप्शन और hover संकेत वैकल्पिक और हल्के रहें
- Flexbox/Grid मॉड्यूल आगे रिस्पॉन्सिव गैलरी गहरा करते हैं
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी