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