CSS Aspect Ratio कैलकुलेटर क्या है?
यह टूल किसी भी पिक्सेल width और height को एक साफ-सुथरे, सरलीकृत aspect ratio में बदल देता है — जैसे 16:9 या 4:3। इसके अलावा यह वही पुराना padding-top प्रतिशत भी निकालता है, जिसका इस्तेमाल responsive कंटेनरों (वीडियो, iframe, इमेज रैपर) को एक तय अनुपात में रखने के लिए किया जाता था — यानी उस दौर में जब आधुनिक CSS aspect-ratio प्रॉपर्टी हर ब्राउज़र में सपोर्ट नहीं होती थी।
इसका इस्तेमाल कैसे करें
अपनी मूल width और height पिक्सेल में डालें। कैलकुलेटर greatest common divisor (GCD) की मदद से रेशियो को उसके सबसे छोटे रूप में घटा देता है, decimal रेशियो (width ÷ height) दिखाता है, और वह padding-top प्रतिशत भी देता है जिसे आप सीधे अपने CSS में पेस्ट कर सकते हैं।
फ़ॉर्मूला समझें
सबसे पहले width और height का GCD निकालें। दोनों संख्याओं को GCD से भाग देने पर सरलीकृत रेशियो मिलता है। उदाहरण के लिए, 1920 और 1080 का GCD 120 है, इसलिए रेशियो बनता है 16:9। padding-top की तरकीब में height ÷ width × 100 का इस्तेमाल होता है, क्योंकि CSS में प्रतिशत padding हमेशा एलिमेंट की width के सापेक्ष गिनी जाती है।
हल किया हुआ उदाहरण
एक 1920×1080 इमेज के लिए: \( \gcd(1920, 1080) = 120 \)। $$\text{Ratio} = \frac{1920}{120} : \frac{1080}{120} = \mathbf{16:9}$$ $$\text{Decimal} = 1920 \div 1080 \approx 1.7778$$ $$\text{Padding-top} = 1080 \div 1920 \times 100 = \mathbf{56.25\%}$$ यानी एक responsive रैपर में आप लिखेंगे padding-top: 56.25%।
अक्सर पूछे जाने वाले सवाल
aspect-ratio प्रॉपर्टी की जगह padding-top क्यों इस्तेमाल करें? padding-top वाली तरकीब हर ब्राउज़र में काम करती है, यहां तक कि बहुत पुराने ब्राउज़रों में भी। नए प्रोजेक्ट सीधे aspect-ratio: 16 / 9; लिख सकते हैं।
प्रतिशत में आधार width होती है या height? CSS में vertical padding का प्रतिशत हमेशा कंटेनिंग ब्लॉक की width के सापेक्ष होता है — इसीलिए फ़ॉर्मूला height ÷ width है।
अगर मेरे नंबर ठीक से सरल न हों तो? कोई भी width और height एक मान्य रेशियो जरूर देंगे; हो सकता है वह 16:9 जैसे किसी जाने-पहचाने नाम से मेल न खाए। ऐसे मामलों में decimal रेशियो काफ़ी काम आता है।
