ऊंचाई के आधार पर डिव का पहलू अनुपात बनाए रखें

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

पारंपरिक दृष्टिकोण में ऊंचाई निर्धारित करने के लिए पैडिंग-टॉप का उपयोग करना शामिल है एक तत्व, जबकि पैडिंग-लेफ्ट का उपयोग ऑब्जेक्ट की चौड़ाई के प्रतिशत के रूप में किया जा सकता है। हालाँकि, यह विधि सीधे तौर पर चौड़ाई को ऊँचाई से नहीं जोड़ती है। . .बॉक्स वर्ग को एक विशिष्ट अनुपात निर्दिष्ट करके, जैसे 2/1, हम परिभाषित करते हैं कि तत्व की चौड़ाई हमेशा उसकी ऊंचाई से दोगुनी होगी:

.बॉक्स { ऊंचाई: 50%; पृष्ठभूमि-रंग: #3CF; पहलू-अनुपात: 2/1; }

यह संपत्ति ऊंचाई और चौड़ाई के बीच सीधा संबंध प्रदान करती है, यह सुनिश्चित करती है कि वे एक निरंतर संबंध बनाए रखें। जैसे ही मार्जिन-टॉप के कारण .बॉक्स की ऊंचाई बदलती है, निर्दिष्ट पहलू अनुपात को बनाए रखने के लिए चौड़ाई स्वचालित रूप से समायोजित हो जाती है।

.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}

पहलू-अनुपात का उपयोग करने के कई फायदे हैं :

उत्तरदायी रखरखाव:

पहलू अनुपात समायोजन स्वचालित रूप से होता है, जिससे जावास्क्रिप्ट गणना या मैन्युअल आकार बदलने की घटनाओं की आवश्यकता समाप्त हो जाती है।

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