CSS Max-width
In this page:
selector {
max-width: length;
width: 100%;
}Max-width बनाम Width
Standard width property एक fixed horizontal size define करती है। अगर कोई screen उस width से narrower है, तो element overflow हो जाता है, जिससे एक horizontal scrollbar बनता है। max-width property element को छोटे screens में fit होने के लिए shrink होने देती है, जबकि बड़े displays पर उसका size cap कर देती है।
- अपने pages को तुरंत responsive बनाने के लिए main containers पर width के बजाय max-width इस्तेमाल करें।
- Accepted values:
- length — एक fixed cap जैसे 800px
- percentage — containing block के relative cap
- none — कोई limit नहीं (default)
- min-content | max-content | fit-content — content-based caps
- ch — character count के आधार पर width
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Max-width vs Width
<style>
.narrow-container {
width: 300px;
border: 2px dashed #999;
padding: 10px;
overflow-x: auto;
}
.fixed {
width: 600px;
background: crimson;
color: white;
padding: 10px;
margin-bottom: 10px;
}
.fluid {
max-width: 600px;
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="narrow-container">
<div class="fixed">width: 600px — overflows the 300px container</div>
<div class="fluid">max-width: 600px — shrinks to fit the 300px container</div>
</div>Auto Margins से Containers को Center करना
किसी block element पर max-width set करना आधी लड़ाई है। इसे visually balanced रखने के लिए, आप इसे auto margins (margin: 0 auto) के साथ जोड़ सकते हैं। यह browser को element के दोनों तरफ़ की बची हुई space calculate करने और उसे बराबर बाँटने का instruction देता है, block को center करते हुए।
- Margin auto सिर्फ तभी काम करता है जब element block-level हो और उसकी एक defined width या max-width हो।
- Accepted values:
- auto — free space को बाँटता है (width वाले block को center करता है)
- 0 auto — कोई vertical margin नहीं, horizontally centered
- length — space की एक fixed amount
- एक side पर auto — flex layouts में element को दूसरी तरफ़ धकेलता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Centering Containers with Auto Margins
<style>
.container {
max-width: 400px;
margin: 0 auto;
background: lightblue;
padding: 10px;
text-align: center;
}
</style>
<div class="container">Centered container</div>Responsive Fluid Images
Default रूप से, images अपने native pixel dimensions पर load होती हैं। अगर कोई image 1200px wide है, तो यह mobile screens पर overflow हो जाएगी। max-width: 100% लागू करना browser को image को dynamically छोटा करके उसके parent container में fit करने का instruction देता है।
उदाहरण: Responsive Fluid Images
<style>
img {
max-width: 100%;
}
</style>
<img src="https://placehold.co/1200x400" alt="Scales down to fit its parent">Box-Sizing के साथ Max-width
Default रूप से, borders और padding किसी element की physical width में जुड़ते हैं। अगर आप max-width को 500px set करते हैं और 20px padding जोड़ते हैं, तो असली box 540px तक फैल जाता है। box-sizing: border-box property borders और padding को आपकी max-width के अंदर बैठने पर मजबूर करती है।
उदाहरण: Max-width with Box-Sizing
<style>
.box {
max-width: 500px;
padding: 20px;
box-sizing: border-box;
background: lightgoldenrodyellow;
border: 2px solid goldenrod;
}
</style>
<div class="box">Padding stays inside the 500px max-width</div>Viewport Units के साथ Max-width
Percentage limits कभी-कभी restrictive हो सकती हैं। Viewport width (vw) units आपको containers को browser window size के relative dynamically scale करने देती हैं, जो fluid grid layouts के लिए उपयोगी है।
- highly responsive container scales बनाने के लिए clamp() को viewport units के साथ combine करें।
- Accepted values:
- vh — viewport height का 1%
- vw — viewport width का 1%
- vmin — smaller viewport dimension का 1%
- vmax — larger viewport dimension का 1%
- dvh / svh / lvh — dynamic, small और large viewport heights
उदाहरण: Max-width with Viewport Units
<style>
.container {
max-width: 90vw;
background: lightpink;
padding: 10px;
margin: 0 auto;
}
</style>
<div class="container">Scales relative to the browser window width</div>- main page containers पर max-width के बजाय fixed widths इस्तेमाल करना, जिससे mobile पर layout-breaking horizontal scrolls होते हैं।
- border-box configuration को छोड़ देना, जिससे 100% max-width और padding वाले containers overflow हो जाते हैं।
- responsive image assets पर fixed pixel widths लागू करना, जो छोटे screens पर उन्हें shape से बाहर stretch कर देता है।
- max-width property elements को छोटे screens पर scale down होने देती है जबकि बड़े displays पर उनका size cap कर देती है।
- max-width को margin: 0 auto के साथ जोड़कर अपने page पर block containers को horizontally center करें।
- images को responsive बनाने के लिए max-width: 100% इस्तेमाल करें, और layout overflow रोकने के लिए globally box-sizing: border-box set करें।
max-width property और border-box sizing हर modern web browser द्वारा natively supported हैं।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: