आयाम अनुपात बॉक्स जनरेटर आधुनिक और विरासत CSS दृष्टिकोणों के साथ प्रतिक्रियाशील आयाम अनुपात बॉक्स उत्पन्न करें।

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