CSS Height और Width: एलिमेंट साइज़ कंट्रोल करने का पूरा गाइड

CSS Height और Width प्रॉपर्टीज़

जब आप वेब पेज डिज़ाइन कर रहे होते हैं, तो आप संभवतः उन एलिमेंट्स के लिए विशिष्ट आकार निर्दिष्ट करना चाहेंगे जो वेब पेज पर दिखाई देते हैं। उदाहरण के लिए, आप चाह सकते हैं कि किसी बॉक्स की एक निश्चित ऊंचाई हो, या टेक्स्ट की एक लाइन एक निश्ची चौड़ाई तक फैले।

यहीं पर CSS height और width प्रॉपर्टीज़ काम आती हैं। ये प्रॉपर्टीज़ आपको CSS में किसी एलिमेंट की ऊंचाई और चौड़ाई सेट करने की अनुमति देती हैं।

Height और Width कैसे काम करते हैं

किसी वेब पेज पर किसी एलिमेंट की ऊंचाई और चौड़ाई सेट करने से आप उस स्थान को परिभाषित कर सकते हैं जो वह एलिमेंट वेब पेज पर घेरेगा। यह आपको अपने वेब पेज पर एलिमेंट्स के लिए एक संरचना विकसित करने में मदद कर सकता है ताकि प्रत्येक एलिमेंट आपकी आवश्यकताओं के आधार पर सही ढंग से दिखाई दे।

किसी एलिमेंट को हॉरिजॉन्टली और वर्टिकली कितना फैलाया जा सकता है, यह परिभाषित करने के लिए आप क्रमशः width और height प्रॉपर्टीज़ का उपयोग कर सकते हैं।

width और height प्रॉपर्टीज़ आपको किसी बॉक्स के कंटेंट एरिया के लिए एक विशिष्ट चौड़ाई और ऊंचाई सेट करने की अनुमति देती हैं। इसका अर्थ है कि width और height प्रॉपर्टीज़ बॉक्स के कंटेंट के लिए स्पेस को कंट्रोल करती हैं और बॉक्स के लिए सेट किए गए किसी भी मार्जिन या पैडिंग को प्रभावित नहीं करती हैं।

सिंटैक्स

height: heightValue; width: widthValue;

heightValue और widthValue मान निम्न में से कोई एक स्वीकार कर सकते हैं:

• auto: ब्राउज़र स्वचालित रूप से ऊंचाई और चौड़ाई की गणना करता है।
• length: px, em, rem, आदि में बॉक्स की चौड़ाई या ऊंचाई।
• percentage: उस ब्लॉक के आकार के प्रतिशत के रूप में बॉक्स की चौड़ाई या ऊंचाई जिसमें एलिमेंट दिखाई देता है।
• initial: बॉक्स के लिए निर्दिष्ट डिफ़ॉल्ट वैल्यू।
• inherit: जिस बॉक्स में एलिमेंट दिखाई देता है उसकी चौड़ाई या ऊंचाई के समान वैल्यू।

CSS Height और Width प्रॉपर्टीज़ के उदाहरण

मान लीजिए हम The Pickled Apple नामक एक स्थानीय कैफे के लिए वेबसाइट डिज़ाइन कर रहे हैं। इस कैफे ने हमें उनकी वेबसाइट के "About" पेज पर एक बॉक्स बनाने के लिए कहा है, जिसमें कैफे का संक्षिप्त विवरण होना चाहिए।

यह बॉक्स 200px चौड़ा और 200px लंबा होना चाहिए और इसका बैकग्राउंड हल्का ग्रे होना चाहिए। इन आयामों को यह सुनिश्चित करने के लिए चुना गया है कि जब हम उन्हें लागू करें तो वेब पेज पर जोड़ने वाले अन्य एलिमेंट्स फिट होंगे।

हम बॉक्स बनाने के लिए निम्न कोड का उपयोग कर सकते हैं:

<html>
  <p class="aboutBox">
    The Pickled Apple, स्प्रिंगफील्ड, इलिनोइस में स्थित, 2004 से गर्व से 
    उच्च गुणवत्ता वाली चाय, स्पेशलिटी कॉफी, और स्वादिष्ट केक परोस रहा है।
  </p>
<style>
  .aboutBox { 
    height: 200px; 
    width: 200px; 
    background-color: lightgray; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

आइए हमारे कोड को तोड़कर देखें। हमारी HTML फाइल में, हमने <p> टैग का उपयोग करके टेक्स्ट का एक पैराग्राफ बनाया है। इस <p> टैग का क्लास नाम aboutBox है, जिसका उपयोग हम अपनी CSS फाइल में पैराग्राफ को स्टाइल करने के लिए करते हैं।

हमारी CSS फाइल में, हमने एक स्टाइल नियम परिभाषित किया है जो aboutBox क्लास नाम वाले किसी भी एलिमेंट पर लागू होता है। यह स्टाइल नियम एलिमेंट की ऊंचाई को 200px, एलिमेंट की चौड़ाई को 200px, और एलिमेंट के बैकग्राउंड कलर को हल्का ग्रे सेट करता है।

अगर हम चाहते कि हमारा एलिमेंट 100px चौड़ा हो, तो हम width प्रॉपर्टी को 100px के बराबर बदल सकते हैं। या अगर हम चाहते कि हमारा एलिमेंट 300px लंबा हो, तो हम height प्रॉपर्टी को 300px के बराबर बदल सकते हैं।

CSS Min और Max लेंथ प्रॉपर्टीज़

width और height फिक्स्ड वैल्यूज़ हैं। इसका अर्थ है कि आपके द्वारा निर्दिष्ट चौड़ाई और ऊंचाई समान रहेगी और विंडो का आकार बदलने या वेब पेज को अलग डिवाइस पर देखने पर नहीं बदलेगी (जब तक कि आप रिलेटिव हाइट वैल्यू का उपयोग न करें, जैसे पैरेंट एलिमेंट के आकार का प्रतिशत)।

यह समझना महत्वपूर्ण है क्योंकि यदि आप एक सुलभ अनुभव डिज़ाइन करना चाहते हैं, तो एलिमेंट्स के लिए विशिष्ट ऊंचाई और चौड़ाई सेट करना व्यावहारिक नहीं हो सकता है। उदाहरण के लिए, यदि आप किसी इमेज की चौड़ाई 500px निर्दिष्ट करते हैं, तो यदि यूज़र मोबाइल डिवाइस पर साइट देखता है, जिसका स्क्रीन आकार छोटा हो सकता है, तो इमेज गलत तरीके से रेंडर हो सकती है।

यहीं पर min और max लेंथ वैल्यूज़ काम आती हैं।

किसी एलिमेंट को अलग-अलग स्क्रीन और व्यूपोर्ट साइज़ के अनुकूल बनाने के लिए, आप min-width, max-width, min-height, और max-height प्रॉपर्टीज़ का उपयोग कर सकते हैं। जब आप इन प्रॉपर्टीज़ को निर्दिष्ट करते हैं, तो width और height के लिए निर्दिष्ट वैल्यूज़ ओवरराइड हो जाएंगी।

• min-height प्रॉपर्टी किसी प्रॉपर्टी की न्यूनतम ऊंचाई को परिभाषित करती है। यदि min-height निर्दिष्ट है, तो एलिमेंट की ऊंचाई min-height के मान से कभी कम नहीं हो सकती। min-width प्रॉपर्टी इसी तरह काम करती है।
• max-height और max-width क्रमशः किसी प्रॉपर्टी की अधिकतम ऊंचाई या चौड़ाई को परिभाषित करते हैं।

उदाहरण: रिस्पॉन्सिव बॉक्स

आइए पहले के कैफे उदाहरण पर लौटते हैं। मान लीजिए हम चाहते हैं कि हमारे बॉक्स की चौड़ाई यूज़र की स्क्रीन के आकार के आधार पर बदल जाए। बॉक्स की अधिकतम चौड़ाई 500px होनी चाहिए, और हमारा बॉक्स कभी भी 100px से संकरा नहीं होना चाहिए। हम निम्न कोड का उपयोग करके इस लक्ष्य को पूरा कर सकते हैं:

<html>
  <p class="aboutBox">
    The Pickled Apple, स्प्रिंगफील्ड, इलिनोइस में स्थित, 2004 से गर्व से 
    उच्च गुणवत्ता वाली चाय, स्पेशलिटी कॉफी, और स्वादिष्ट केक परोस रहा है।
  </p>
<style>
  .aboutBox { 
    max-width: 500px; 
    min-width: 100px; 
    background-color: lightgray; 
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

आइए हमारे कोड को तोड़कर देखें और चर्चा करें कि यह कैसे काम करता है। हमारी HTML फाइल में, हमने <p> टैग्स के बीच टेक्स्ट का एक पैराग्राफ निर्दिष्ट किया है जिसमें हमारे पहले उदाहरण के समान टेक्स्ट है। इस पैराग्राफ से जुड़ा क्लास नाम aboutBox है।

हमारी CSS फाइल में, हमने aboutBox क्लास से जुड़ी तीन प्रॉपर्टीज़ निर्दिष्ट की हैं।

• max-width प्रॉपर्टी 500px पर सेट है, जिसका अर्थ है बॉक्स की अधिकतम चौड़ाई 500px है।
• min-width प्रॉपर्टी 100px पर सेट है, जिसका अर्थ है बॉक्स कभी भी 100px से संकरा नहीं दिखाई देगा, चाहे यूज़र किसी भी डिवाइस पर साइट देख रहा हो।
• background-color प्रॉपर्टी को lightgray पर सेट किया गया है, जो हमारे बॉक्स का बैकग्राउंड कलर हल्का ग्रे सेट करता है।

इस बॉक्स का आकार ब्राउज़र के आकार के आधार पर बदलेगा। इसलिए, यदि आप ब्राउज़र विंडो को छोटा करते हैं, तो बॉक्स का आकार तदनुसार बदल जाएगा। हालांकि, ब्राउज़र विंडो कितनी भी बड़ी दिखाई दे, <p> टैग की चौड़ाई कभी भी 500px से अधिक नहीं होगी।

निष्कर्ष

CSS height और width प्रॉपर्टीज़ आपको वेब पेज पर किसी एलिमेंट की ऊंचाई और चौड़ाई परिभाषित करने की अनुमति देती हैं।

हालांकि, ये प्रॉपर्टीज़ एलिमेंट की ऊंचाई और चौड़ाई के लिए एक फिक्स्ड वैल्यू सेट करती हैं। यदि आप चाहते हैं कि बॉक्स का आकार ब्राउज़र विंडो के आकार के आधार पर बदले, तो आप min-height, min-width, max-height और max-width प्रॉपर्टीज़ का उपयोग कर सकते हैं।

इस ट्यूटोरियल में उदाहरणों के संदर्भ में, CSS में height और width की बुनियादी बातों, height और width प्रॉपर्टीज़ का उपयोग कैसे करें, और वेब पेज पर किसी एलिमेंट का आकार सेट करने के लिए संबंधित max और min height और width प्रॉपर्टीज़ का उपयोग कैसे करें, इस पर चर्चा की गई। अब आप एक एक्सपर्ट की तरह height और width प्रॉपर्टीज़ का उपयोग शुरू करने के लिए तैयार हैं!