max-width प्रॉपर्टी

max-width प्रॉपर्टी एलिमेंट की अधिकतम चौड़ाई सेट करती है। प्रॉपर्टी के वैल्यू के रूप में कोई भी आकार की यूनिट या कीवर्ड none हो सकता है, जो कोई वैल्यू न होने का संकेत देता है।

आमतौर पर यह प्रॉपर्टी फ्लोटिंग चौड़ाई वाले एलिमेंट के लिए सेट की जाती है (चौड़ाई प्रतिशत में दी गई है या बिल्कुल नहीं दी गई है, और एलिमेंट अपनी कंटेंट के अनुसार चौड़ाई में फैलता है)। यदि एलिमेंट की चौड़ाई प्रतिशत में दी गई है - ब्राउज़र विंडो बढ़ाने पर यह तब तक बढ़ेगी, जब तक कि यह max-width के वैल्यू तक नहीं पहुँच जाती।

सिंटैक्स

cssसिलेक्टर {
  max-width: वैल्यू;
}

उदाहरण

इस उदाहरण में चौड़ाई पैरेंट की चौड़ाई का प्रतिशत है। ब्राउज़र विंडो की चौड़ाई बढ़ाएं, और कंटेनर भी ब्राउज़र विंडो की चौड़ाई के अनुसार ढलने के लिए बढ़ेगा। हालाँकि, यह केवल उस वैल्यू तक ही बढ़ेगा जो max-width में परिभाषित है, यह 900px है। जैसे ही कंटेनर इस चौड़ाई तक पहुँचेगा - यह बढ़ना बंद कर देगा:

html<div id="elem"></div>

css#elem {
  width: 70%;
  max-width: 900px;
  height: 300px;
  border: 1px solid black;
}

Результат:

उदाहरण

इस उदाहरण में कंटेनर की चौड़ाई दोनों तरफ से सीमित है: यह 900px से बड़ा और 400px से छोटा नहीं हो सकेगा:

html<div id="elem"></div>

css#elem {
  width: 70%;
  max-width: 900px;
  min-width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

यह भी देखें