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