उत्तरदायी छवियाँ ResponsifyJS के साथ आसान बना दिया

आधुनिक वेब 100% उत्तरदायी होना चाहिए और नए पुस्तकालय इसे तेजी से संभव बना रहे हैं.

मुफ्त प्लगइन्स के साथ, जैसे कि ResponsifyJS, आपकी वेबसाइट को सभी उपकरणों पर काम करना और भी आसान है। इस मुफ्त jQuery प्लगइन छवियों का एक कंटेनर लेता है और गतिशील रूप से उन्हें पुनर्व्यवस्थित करता है स्क्रीन आकार बदलती पर आधारित है.

विभिन्न कंटेनरों के बाद से छवियों को अलग तरह से पकड़ो, वे बहुत ही अजीब तरीके से आकार बदल सकते हैं। कभी-कभी, आपके पास मोबाइल पर रिसाइज़ होने पर लोगों के फोटो और उनके चेहरे कट सकते हैं.

इस सटीक समस्या को हल करने के लिए ज़िम्मेदारी प्लगइन बनाया गया था। यह स्वचालित रूप से काम कर सकता है लेकिन असली जादू में निहित है अपने स्वयं के फोकस क्षेत्र को परिभाषित करना तस्वीर पर.

यह एक का उपयोग करता है दशमलव विवरण की आंतरिक प्रणाली यह पता लगाने के लिए कि छवि का फोकस कहां होना चाहिए। उदाहरण के लिए, आप कर सकते हैं पदों को परिभाषित करें जैसे कि डेटा फोकस टॉप कौन कौन से “में ब्लॉक करता है” छवि का एक निश्चित खंड.

इस डेटा को पारित करने की आवश्यकता है दशमलव के रूप में, उदाहरण के लिए .5 दशमलव लक्ष्य 50% छवि (बाएं / दाएं या ऊपर / नीचे)। स्वाभाविक रूप से, यह अपने आप से करने के लिए बहुत भ्रामक है। लेकिन, वहाँ एक है मुफ्त जिम्मेदारी अनुप्रयोग वह आपको देता है पदों की गणना गतिशील रूप से करें आपके ब्राउज़र में.

बस एक चित्र अपलोड करें, फ़ोकस क्षेत्र को परिभाषित करें, फिर अपनी वेबसाइट में छवि कोड को कॉपी / पेस्ट करें। ज़िम्मेदारी प्लगइन में छोटे स्क्रीन पर छवि को ठीक से आकार देने के लिए आवश्यक सभी डेटा होंगे.

आप काफी कुछ पा सकते हैं लाइव डेमो लिंक अपनी साइट में कॉपी / पेस्ट करने के लिए कोड स्निपेट सहित GitHub रेपो में.

यह प्लगइन हर प्रोजेक्ट के लिए सही समाधान नहीं है। कभी-कभी, आप करेंगे चाहते हैं फिक्स्ड फोकस क्षेत्रों के बिना आकार बदलने के लिए। लेकिन, यदि आप उपयोग कर रहे हैं jQuery के साथ चिनाई ग्रिड यह अपने स्टैक में ResponsifyJS को जोड़ने के लिए चोट नहीं करता है.

अधिक जानने के लिए, लाइव डेमो, एक डाउनलोड लिंक और एक पूर्ण सेटअप गाइड के लिए प्लगइन होमपेज पर जाएं.