एक वेब डेवलपर के रूप में, किसी को अक्सर HTML तत्वों के साथ काम करने के लिए शर्मिंदा किया जाता है, जो कि खुद के द्वारा - img तत्व के विपरीत, उदाहरण के लिए - न तो एक निश्चित आकार और न ही एक निश्चित पहलू अनुपात है। अक्सर आप यह प्राप्त करना चाहते हैं कि ये वस्तुएं जिम्मेदारी से व्यवहार करती हैं, लेकिन चौड़ाई और ऊंचाई के बीच का अनुपात बनाए रखा जाता है। सीएसएस डिफ़ॉल्ट रूप से यहां एक सहज समाधान प्रदान नहीं करता है। लेकिन वर्टिकल पैडिंग प्रॉपर्टी की मदद से आप अपने लक्ष्य को प्राप्त कर सकते हैं।
आइए वर्ग लेख छवियों का हर रोज़ उदाहरण लेते हैं, जिनमें से ग्राफिक्स आवश्यक रूप से चौकोर नहीं हैं, लेकिन हम उन्हें अतिरिक्त प्रयास के बिना और उन सभी के बिना पहलू अनुपात 1 के साथ विरूपण के बिना प्रदर्शित करना चाहते हैं, जिससे उनकी चौड़ाई (और इस प्रकार ऊंचाई भी) जिम्मेदारी से बदल जाती है ऐसा करना चाहिए। निम्नलिखित कोड के साथ सीएसएस की मदद से अतिरिक्त मार्कअप के बिना ऐसा करना बहुत आसान है:
1bc3a80de3db90cdf0535541236d95f2
नतीजे के साथ
लेकिन यह क्यों काम करता है और अन्य पहलू अनुपात कैसे बनाए जा सकते हैं? इसकी कुंजी गद्दी की संपत्ति में निहित है, जो - प्रतिशत मूल्यों में दी गई है - हमेशा चौड़ाई संपत्ति (मूल तत्व की चौड़ाई) के समान मूल मूल्य पर आधारित होती है। पैडिंग-लेफ्ट और पेडिंग-राइट के साथ यह स्पष्ट है, पेडिंग-टॉप और पेडिंग-बॉटम आश्चर्यजनक है, लेकिन इस मामले में बहुत सहायक है।
यदि आप 16: 9 का पहलू अनुपात चाहते हैं, उदाहरण के लिए, आप मानों की चौड़ाई चुनते हैं: 100%; पैडिंग-बॉटम: 56.25%। एक पहलू अनुपात जो सुनहरे अनुपात को ध्यान में रखता है वह है चौड़ाई: 100%; पैडिंग-बॉटम: 61.81%; वसूली योग्य।
कैल्क की मदद से आप सीधे पहलू अनुपात को निर्दिष्ट कर सकते हैं, उदाहरण के लिए 16: 9 के लिए पैडिंग-बॉटम के साथ: कैल्क (1 / (16/9) * 100%)। यदि तत्व में आगे, नेस्टेड तत्व होते हैं, तो मूल तत्व के पैडिंग की भरपाई के लिए चाइल्ड एलिमेंट को पूरी तरह से तैनात किया जाता है:
1bc3a80de3db90cdf0535541236d95f2
यह निम्नलिखित परिणाम की ओर जाता है: