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

परिचय

`max-width` प्रॉपर्टी एलिमेंट की अधिकतम चौड़ाई सेट करती है। कंटेंट इससे चौड़ा नहीं होगा।

सिंटैक्स

max-width: <length> | <percentage> | none;

उदाहरण

<html>
<head>
    <style>
        .limited-width {
            max-width: 100px;
            height: 200px;
            border: 1px solid green;
            padding: 5px;
            margin: 10px;
        }
        
        .responsive-img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <p class="limited-width">
        यह पैराग्राफ 200px ऊंचा है और अधिकतम चौड़ाई 100px है।
        लंबा टेक्स्ट यहां रैप होगा क्योंकि max-width 100px है।
    </p>
    
    <img class="responsive-img" src="/css/images/logo.png" alt="Logo" />
</body>
</html>

उपयोग के मामले

• रिस्पॉन्सिव इमेज: `max-width: 100%; height: auto;` - कंटेनर से बड़ा नहीं
• पठनीयता: `max-width: 65ch;` - टेक्स्ट लाइन लंबाई सीमित (65 कैरेक्टर)
• कार्ड/कंटेनर: अधिकतम चौड़ाई लेकिन छोटी स्क्रीन पर सिकुड़ता है
• फॉर्म इनपुट: `max-width: 400px;` - बहुत चौड़ा नहीं

संबंधित प्रॉपर्टीज

• `min-width` - न्यूनतम चौड़ाई
• `width` - निश्चित चौड़ाई (max-width द्वारा ओवरराइड होता है)
• `max-height` - अधिकतम ऊंचाई

नोट

अगर `width > max-width`, तो `max-width` जीतता है। अगर `min-width > max-width`, तो `min-width` जीतता है।