विरूपण के बिना ब्राउज़र विंडो में फिट होने के लिए एक छवि का आकार बदलें

ब्राउज़र विंडो में फिट होने के लिए एक छवि का आकार बदलना सरल समाधानों के साथ एक सामान्य कार्य है। हालाँकि, विशिष्ट आवश्यकताओं का पालन करना, जैसे अनुपात को संरक्षित करना और क्रॉपिंग से बचना, चुनौतियाँ पेश कर सकता है।

स्क्रॉलबार और जावास्क्रिप्ट के बिना समाधान (केवल सीएसएस)

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

JQuery के साथ समाधान

यदि जावास्क्रिप्ट उपलब्ध है , दूसरा दृष्टिकोण है:

यहां, बॉडी की ऊंचाई विंडो की ऊंचाई से मेल खाने के लिए सेट की गई है, जिससे यह सुनिश्चित होता है कि छवि पर अधिकतम-ऊंचाई संपत्ति सही ढंग से काम करती है। विंडो का आकार बदलने पर बॉडी की ऊंचाई और छवि आकार को स्वचालित रूप से समायोजित करने के लिए विंडो आकार बदलने की घटना को भी नियंत्रित किया जाता है।