CSS रिस्पॉन्सिव इमेज
Media queries ने viewport बदलने पर layout बदला। Images अलग दबाव हैं: 4000px चौड़ी file संकीर्ण column में overflow, bandwidth या load पर page jump। यह पाठ fluid CSS, space reserve और smarter sources — पिछले @media syntax दोहराए बिना।
Responsive image toolkit
📊 Responsive images एक नज़र
| टुकड़ा | रोज़ का काम |
|---|---|
max-width: 100% + height: auto |
column में scale; aspect ratio बना |
<img> पर width/height या CSS aspect-ratio |
layout space; कम CLS |
srcset + sizes |
browser render width के करीब file चुनता है |
<picture> + <source media> |
Art direction — अलग crop/asset |
object-fit + fixed box |
ज्ञात frame में crop (Object Fit पाठ) |
| Layout media queries | columns/nav — image slot width follow करती है |
दो परतें: layout width और image behavior। पहले CSS से overflow ठीक; फिर srcset जब mobile पर छोटी files चाहिए।
Fluid image — max-width, height: auto
.article img {
max-width: 100%;
height: auto;
display: block;
}
विशाल intrinsic image पर सिर्फ width: 100% बिना max-width से बचें। srcset के साथ मिलाएँ।
Space reserve — aspect-ratio
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
पूरी photo दिखानी हो तो fluid max-width। fixed frame design में aspect-ratio + cover।
Resolution — srcset, sizes
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>
sizes सच्चा रखें — CSS जितना render करता है utna likho।
Art direction — <picture>
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>
picture art direction के लिए; हर breakpoint duplicate नहीं।
Fixed frame — object-fit याद
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}
Media queries columns बदलती हैं; images slot width inherit। sizes update करें।
Try it
- Wide img —
max-width: 100%,height: auto. - Hero पर aspect-ratio।
- srcset + sizes।
- picture दो crops।
- card thumb cover।
गलतियाँ
- बड़ा src बिना srcset
- width 100% बिना height auto
- galat sizes
- object-fit बिना box
- yahan @media syntax दोहराना
सार
- Fluid CSS column में रखता है
- aspect-ratio CLS कम
- srcset/sizes file; picture art direction
- object-fit fixed frames
- अगला: Breakpoints
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी