CSS RWD Images
In this page:
img {
max-width: 100%;
height: auto;
}Core Fluid Image Rule
किसी image पर max-width: 100% और height: auto set करना इसे अपने natural size से narrower किसी भी container में fit होने के लिए shrink होने देता है, अपना aspect ratio बनाए रखते हुए, बिना कभी अपनी असली pixel dimensions से आगे बढ़े और blurry हुए।
- Accepted values:
- max-width: 100% — parent से कभी wider नहीं
- height: auto — aspect ratio बनाए रखता है
- display: block — inline gap हटाता है
- width: 100% — हमेशा parent भरता है
उदाहरण: The Core Fluid Image Rule
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="https://placehold.co/1200x800" alt="Shrinks to fit, keeps its aspect ratio">height: auto क्यों मायने रखता है
height: auto के बिना सिर्फ max-width: 100% set करना height को image की natural pixel height पर fixed छोड़ सकता है भले ही width shrink हो, image को distort करते हुए -- height: auto browser को बताता है कि width बदलने पर height को proportionally recalculate करे।
- Accepted values:
- height: auto — default, height ratio को follow करती है
- height: <length> — एक fixed height image को distort करती है
- width और height attributes — browser aspect-ratio से जगह reserve करता है
- max-width: 100% — height: auto के साथ जोड़ता है
उदाहरण: Why height: auto Matters
<style>
.distorted {
max-width: 100%;
}
.correct {
max-width: 100%;
height: auto;
}
</style>
<img class="distorted" src="https://placehold.co/800x400" alt="Height stays fixed, can distort">
<img class="correct" src="https://placehold.co/800x400" alt="Height recalculates proportionally">अलग Image Sizes Serve करना
CSS से scale down की गई एक single बड़ी image किसी छोटी phone screen पर भी अपनी पूरी file size download करती है, bandwidth बर्बाद करते हुए -- HTML srcset और sizes attributes (और art-direction cases के लिए <picture> element) browser को हर device के लिए एक उपयुक्त-size file चुनने देते हैं।
- Accepted values:
- srcset="a.jpg 480w, b.jpg 1200w" — widths वाले image candidates
- sizes="(max-width: 600px) 480px, 1200px" — display width hints
- srcset="a.jpg 1x, b.jpg 2x" — density descriptors
- <picture> और <source media="..."> — art direction
उदाहरण: Serving Different Image Sizes
<style>
img { max-width: 100%; height: auto; border: 3px solid #1e6fd9; background: #cfe8ff; }
<img srcset="small.jpg 480w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, 1200px"
src="large.jpg" alt="Browser picks the right file size per device">
</style>
<img srcset="small.jpg 480w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, 1200px"
src="large.jpg" alt="Browser picks the right file size per device">Background Images बनाम Inline Images
CSS में background-image <img> की तरह max-width/height: auto को respond नहीं करता -- responsive background images इसके बजाय background-size: cover या contain पर निर्भर करती हैं, ज़रूरत पड़ने पर खुद image file बदलने के लिए media queries के साथ combined।
- Accepted values:
- background-image: url(...) — image
- background-size: cover | contain | <length> — sizing
- background-position: <position> — placement
- background-repeat: no-repeat — कोई tiling नहीं
- image-set() — backgrounds के लिए resolution switching
उदाहरण: Background Images vs Inline Images
<style>
.hero {
background-image: url('https://placehold.co/1200x400');
background-size: cover;
height: 200px;
}
</style>
<div class="hero">background-size handles responsiveness here, not max-width</div>Cropped Responsive Images के लिए object-fit
जब किसी image को बिना distortion के exactly एक fixed-aspect-ratio box (जैसे एक square avatar या card thumbnail) भरना हो, तो object-fit: cover image को box भरने के लिए crop करता है जबकि object-fit: contain इसे इसके बजाय letterbox करता है -- दोनों किसी भी container size के साथ काम करते हैं।
- Accepted values:
- object-fit: cover — box भरता है, overflow crop करता है
- object-fit: contain — अंदर fit होता है, letterbox हो सकता है
- object-fit: fill — default, box में stretch होता है
- object-fit: none | scale-down — no resize / none और contain में से छोटा
- object-position: <position> — crop focus चुनता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: object-fit for Cropped Responsive Images
<style>
img {
width: 150px;
height: 150px;
object-fit: cover;
}
</style>
<img src="https://placehold.co/400x200" alt="Cropped to fill the square without distortion">height: autoभूल जाना, इसलिए height set होने पर image stretch हो जाती है।- सिर्फ
width: 100%इस्तेमाल करना, जो छोटी images को बड़ा और blurry बना सकता है, जबकिmax-width: 100%इसे रोकता है। - phones को एक बड़ी image serve करना, जो data बर्बाद करता है।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: