सीएसएस ऊंचाई और चौड़ाई

इस तत्व की चौड़ाई 100% है।

CSS ऊंचाई और चौड़ाई सेट करें

ऊंचाई याद रखें वाइड्थ प्रयोग करें

height और width गुण अंतरिम अंतराल, किनारा या बाह्य-अंतराल नहीं शामिल करते। वे एलेमेंट के अंतरिम अंतराल, किनारा और बाह्य-अंतराल के अंदर के क्षेत्र की ऊंचाई/चौड़ाई को सेट करते हैं。

CSS ऊंचाई और चौड़ाई मान

ऊंचाई याद रखें वाइड्थ प्रयोग के लिए इस प्रयोग को लागू करें:

  • auto - डिफ़ॉल्ट। ब्राउज़र ऊंचाई और चौड़ाई को गणना करता है。
  • length - px, cm आदि से ऊंचाई/चौड़ाई निर्धारित की जाती है。
  • % - इनक्लुजन बॉक्स के प्रतिशत (%) से ऊंचाई/चौड़ाई निर्धारित की जाती है。
  • initial - ऊंचाई/चौड़ाई को डिफ़ॉल्ट मान रखा जाता है。
  • inherit - अपने पैरेन्ट के मान से ऊंचाई/चौड़ाई को ले लेता है。

CSS ऊंचाई और चौड़ाई उदाहरण

इस एलेमेंट की ऊंचाई 200 पिक्सेल है, चौड़ाई 50% है

उदाहरण

एलेमेंट की ऊंचाई और चौड़ाई निर्धारित करें:

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

स्वयं एक प्रयोग कीजिए

इस एलेमेंट की ऊंचाई 100 पिक्सेल है, चौड़ाई 500 पिक्सेल है。

उदाहरण

एक और <div> एलेमेंट की ऊंचाई और चौड़ाई निर्धारित करें:

div {
  height: 100px;
  प्रयोग करें
  background-color: powderblue;
}

स्वयं एक प्रयोग कीजिए

चौड़ाईनोट:ऊंचाई याद रखें वाइड्थ प्रयोग के लिए इस प्रयोग को पूर्ण करें!

प्रयोग करें

max-width प्रयोग कीजिए (px, cm आदि) या पूर्ण बॉक्स के प्रतिशत (%) के रूप में max-width (अधिकतम चौड़ाई) को निर्धारित किया जा सकता है या इसे none (डिफ़ॉल्ट मान) के रूप में निर्धारित किया जा सकता है。

इसके लिए

जब ब्राउज़र विंडो की चौड़ाई एलेमेंट की चौड़ाई से कम हो जाए (500px) तो इसका एक प्रश्न उठता है: <div> का प्रश्न उठता है। तब, ब्राउज़र एक स्क्रॉल बार जोड़ देगा。

इस स्थिति में max-width ब्राउज़र के छोटे विंडो का संबंध कम करने में मदद कर सकती है。

सलाह:ब्राउज़र विंडो को 500px से कम चौड़ाई वाले चौड़ाई में खींचकर दो दिवज के बीच के अंतर को देखें!

इस एलेमेंट की ऊंचाई 100 पिक्सेल है, अधिकतम चौड़ाई 500 पिक्सेल है。

इस एलेमेंट की ऊंचाई 100 पिक्सेल है, अधिकतम चौड़ाई 500 पिक्सेल है。

नोट:max-width गुण का मान वाइड्थ(चौड़ाई)。

उदाहरण

इस <div> एलेमेंट की ऊंचाई 100 पिक्सेल है, अधिकतम चौड़ाई 500 पिक्सेल है:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

स्वयं एक प्रयोग कीजिए

और अधिक उदाहरण

एलेमेंट की ऊंचाई और चौड़ाई निर्धारित करना
यह उदाहरण दिखाता है कि कैसे अलग-अलग एलेमेंट की ऊंचाई और चौड़ाई निर्धारित की जा सकती है。
प्रतिशत मान से इमेज की ऊंचाई और चौड़ाई निर्धारित करना
यह उदाहरण दिखाता है कि कैसे प्रतिशत मान से इमेज की ऊंचाई और चौड़ाई निर्धारित की जा सकती है。
एलेमेंट की न्यूनतम और अधिकतम चौड़ाई निर्धारित करना
यह उदाहरण दिखाता है कि कैसे आकार के अनुक्रम से एलेमेंट की न्यूनतम और अधिकतम चौड़ाई निर्धारित की जा सकती है。
एलिमेंट की न्यूनतम ऊंचाई और अधिकतम ऊंचाई सेट करें
इस इंस्टेंस में आयत्तांक मान के द्वारा एलिमेंट की न्यूनतम ऊंचाई और अधिकतम ऊंचाई को सेट करने के तरीके दिखाया गया है。

CSS आकार अट्रिब्यूट सेट करें

अट्रिब्यूट वर्णन
ऊंचाई सेट एलिमेंट की ऊंचाई
max-height सेट एलिमेंट की अधिकतम ऊंचाई
max-width सेट एलिमेंट की अधिकतम चौड़ाई
min-height सेट एलिमेंट की न्यूनतम ऊंचाई
min-width सेट एलिमेंट की न्यूनतम चौड़ाई
वाइड्थ सेटिंग एलिमेंट की चौड़ाई