Css Notes

CSS Height and Width

by

height और width प्रॉपर्टी का उपयोग HTML Elements (जैसे – div, image, heading, table आदि) की ऊँचाई और चौड़ाई निर्धारित करने के लिए किया जाता है। ऊँचाई और चौड़ाई में पैडिंग, बॉर्डर या मार्जिन शामिल नहीं होते, यह Element के पैडिंग, बॉर्डर और मार्जिन के अंदर के क्षेत्र की ऊँचाई और चौड़ाई निर्धारित करता है।

This div element containing height 150px and width 50%

CSS height and width Values

height और width प्रॉपर्टी के निम्नलिखित मान हो सकते हैं:

  • auto - यह डिफ़ॉल्ट है। ब्राउज़र स्वतः ऊँचाई और चौड़ाई की गणना करता है।
  • length - ऊँचाई या चौड़ाई को px, cm आदि में परिभाषित करता है।
  • % - ऊंचाई या चौड़ाई को प्रतिशत में परिभाषित करता है।
  • initial - ऊँचाई या चौड़ाई को उसके डिफ़ॉल्ट मान पर सेट करता है।
  • inherit - ऊँचाई या चौड़ाई अपने पैरेंट मान से इनहेरिट की करता है।
Example
Set the height 200px and width 50% of a <div> element:

CSS Code

div {
  height: 200px;
  width: 50%;
  background-color: yellow;
}

h1{
  height: 100px;
  width: 75%;
  background-color: red;
}

HTML Code

<body>
<div>
   <h2>This is Heading</h2>
</div>
</body>

This is Heading

CSS max-width

CSS मे max-width प्रॉपर्टी का उपयोग किसी Element की अधिकतम चौड़ाई निर्धारित करने के लिए किया जाता है। यह प्रॉपर्टी रिस्पॉन्सिव वेब डिजाइन बनाने में बहुत उपयोगी है, क्योंकि यह एलिमेंट्स को विभिन्न स्क्रीन आकारों के अनुसार समायोजित करने में मदद करता है। width प्रॉपर्टी के साथ एक समस्या तब हो सकती है जब ब्राउज़र विंडो Element की चौड़ाई से छोटी हो। तब ब्राउज़र पृष्ठ पर एक क्षैतिज स्क्रॉलबार (Horizontal Scrollbar) जोड़ देता है। इसलिए, max-width का उपयोग करने से छोटी विंडो पर ब्राउज़र की हैंडलिंग बेहतर होगी।

उदाहरण– यदि आप किसी इमेज को max-width:100%; देते हैं, तो वह इमेज अपने पैरेंट कंटेनर की चौड़ाई से बड़ी नहीं होगी। यदि इमेज अपने आप में बड़ी है, तो वह पैरेंट के आकार के अनुसार फैल जाएगी, लेकिन यदि वह पहले से ही पैरेंट से छोटी है, तो यह प्रॉपर्टी उस पर कोई प्रभाव नहीं डालेगी। 

max-width प्रॉपर्टी की निम्नलिखित वैल्यू हो सकती हैं –

  • length - px, cm आदि में अधिकतम चौड़ाई निर्धारित करता है।
  • % - अधिकतम चौड़ाई प्रतिशत में निर्धारित करता है।
  • none - यह डिफ़ॉल्ट है। इसका अर्थ है कि कोई अधिकतम चौड़ाई नहीं है।
CSS Code : Example 1
Set the width 100% of a <img> element:

.div1 {
  width: 500px;
}
img{
  width:100%;
}

CSS Code :  Example 2
Set the max-width 100% of a <img> element:

.div2 {
  width: 500px;
}
img{
  max-width:100%;
}

HTML Code

<body>
 <div>
  <img src="image.jpg">
 </div>
</body>

उपरोक्त Example 1 का आउटपुट –

उपरोक्त Example 2 का आउटपुट –

Share This Page

Leave a Comment