सीएसएस में 100% चौड़ाई या ऊंचाई के साथ पहलू अनुपात बनाए रखना

सीएसएस का उपयोग करते समय, हमें अक्सर छवियों की चौड़ाई या ऊंचाई निर्धारित करने की आवश्यकता होती है 100% तक. हालाँकि, ऐसा करने से छवि विकृत हो सकती है। ऐसा इसलिए होता है क्योंकि पहलू अनुपात (छवि की चौड़ाई और ऊंचाई के बीच आनुपातिक संबंध) को बनाए नहीं रखा जा रहा है।

100% चौड़ाई या ऊंचाई का उपयोग करते समय पहलू अनुपात को संरक्षित करने के लिए, हमें छवि के आकार को सीमित करने की आवश्यकता है विशिष्ट तरीका. यदि हम किसी छवि पर केवल एक आयाम (चौड़ाई या ऊंचाई) परिभाषित करते हैं, तो पहलू अनुपात स्वचालित रूप से संरक्षित होता है।

हालांकि, यदि हम चौड़ाई और ऊंचाई दोनों को 100% पर सेट करते हैं, तो छवि हमारे लिए बहुत बड़ी हो सकती है इच्छित स्थान. इस मामले में, हम छवि को एक DIV के अंदर अधिकतम चौड़ाई या ऊंचाई के साथ रख सकते हैं जो हमारी आवश्यकताओं के अनुरूप हो। फिर हम निर्दिष्ट आयामों से परे फैली छवि के किसी भी हिस्से को क्रॉप करने के लिए ओवरफ़्लो: छिपी हुई संपत्ति का उपयोग कर सकते हैं।

वैकल्पिक रूप से, हम अधिकतम आकार को नियंत्रित करने के लिए अधिकतम-चौड़ाई और अधिकतम-ऊंचाई गुणों का उपयोग कर सकते हैं। छवि। किसी भी न्यूनतम आयाम को परिभाषित किए बिना इन मानों को सेट करके, हम यह सुनिश्चित करते हैं कि छवि विकृत नहीं होगी और निर्दिष्ट अधिकतम आयामों से अधिक नहीं होगी।