क्या आप जानते हैं कि वेबसाइट बनाते समय किसी छवि का उपयोग करने से बेहतर क्या हो सकता है? HTML और CSS के साथ कुछ ऐसा बनाने के बारे में क्या ख़याल है जो एक छवि की तरह दिखता और काम करता है? और आप जानते हैं, कंटेनर क्वेरीज़ के साथ यह अब बहुत आसान है। इस पोस्ट में, हम HTML और CSS के साथ एक विज्ञापन बनाने जा रहे हैं, जो एक छवि जैसा दिखता है।  फिर हम इसे एक छवि की तरह बनाने जा रहे हैं क्योंकि यह दब जाएगा, विस्तारित हो जाएगा और दस्तावेज़ के भीतर अन्य स्थानों पर ले जाया जाएगा। ठीक है, आइए इसकी जाँच करें!   https://youtu.be/5ugwp7HlpGs?embedable=true  ठीक है, तो हमारे पास यह वैन विज्ञापन उस साइट के साइडबार में है जिसे हम बना रहे हैं, और यह वर्तमान में एक छवि है।   इससे संपादन करना कठिन हो जाता है; यदि कुछ बदलने की आवश्यकता है तो एक डिजाइनर को इसे अपडेट करना होगा और हमें एक नई छवि प्रदान करनी होगी।  इसके अलावा, हमें संभवतः स्रोत सेट के साथ उपयोग करने के लिए कई संस्करणों की आवश्यकता होगी ताकि यह उच्च-घनत्व और कम-रिज़ॉल्यूशन दोनों डिस्प्ले पर कुरकुरा दिखे।  इसलिए, हमें इसे HTML में परिवर्तित करने का काम सौंपा गया है; हम ऐसा कैसे कर सकते हैं?  छवियों और व्यूपोर्ट इकाइयों का उपयोग करने के कुछ नुकसान  ठीक है, हम शायद व्यूपोर्ट इकाइयों का उपयोग कर सकते हैं, लेकिन अगर हमें विज्ञापन को अलग-अलग स्थानों पर रखना है, जहां इसके आयाम अलग-अलग होंगे तो हमें अतिरिक्त कोड जोड़ने की आवश्यकता होगी क्योंकि सब कुछ व्यूपोर्ट पर आधारित होगा, न कि कंटेनर आयामों पर।  तो, हम इसे दूर कर सकते हैं, लेकिन यह थोड़ा गड़बड़ हो सकता है। इसके बजाय, हम कंटेनर क्वेरीज़ और कंटेनर क्वेरी इकाइयों का उपयोग कर सकते हैं। कंटेनर क्वेरीज़ कुछ हद तक मीडिया क्वेरीज़ की तरह होती हैं लेकिन समग्र व्यूपोर्ट के बजाय पृष्ठ में किसी दिए गए कंटेनर के आयामों पर आधारित होती हैं।  सीएसएस   संपत्ति के साथ एक कंटेनर स्थापित करना container-type  ठीक है, आइए देखें कि हम किससे शुरुआत कर रहे हैं।   तो, यह यहीं बहुत अच्छा लग रहा है, लेकिन यह प्रतिक्रिया करते समय कैसा काम करता है?   उह, पाठ और सीमाओं का आकार नहीं बदलता है, इसलिए इसे कुछ प्यार की ज़रूरत है क्योंकि यह जैसा है वैसा ही टूटा हुआ है। अब, एक चीज जो हम यहां पहले से ही कर रहे हैं, वह यह है कि हम एक   उपयोग कर रहे हैं जो कंटेनर को एक छवि के रूप में प्रतिक्रिया करने की अनुमति देता है, यह सब अच्छा है। aspect-ratio   figure { aspect-ratio: 1 / 1.5; }  हमें सामग्री के सभी आयामों को बदलने की जरूरत है ताकि वह भी सही ढंग से प्रतिक्रिया दे सके। यहां पहला कदम हमारे आयामों की निगरानी के लिए एक कंटेनर प्रदान करना है। यह हमारा आकृति तत्व होगा.  यहां कंटेनर क्वेरीज़ का उपयोग करने के लिए, हमें यह परिभाषित करने की आवश्यकता है कि कन्टेनमेंट संदर्भ के रूप में क्या जाना जाता है। हम इसे   संपत्ति के साथ कर सकते हैं। इस उदाहरण के लिए, हम इनलाइन आकार के मान का उपयोग कर सकते हैं। container-type   figure { ... container-type: inline-size; }  यह एक कंटेनर स्थापित करने जा रहा है जो चीजों को उसके इनलाइन आकार के आधार पर आकार देगा, जो इस मामले में, आकृति की चौड़ाई होगी। ठीक है, तो अब हमारे पास निगरानी के लिए एक कंटेनर है, इसलिए अब हम कंटेनर क्वेरी इकाइयों का उपयोग करने के लिए स्वतंत्र हैं। और, चुनने के लिए बहुत कुछ है। हम इनमें से किसी भी इकाई मान का उपयोग कर सकते हैं:   cqw   cqh   cqi   cqb   cqmin   cqmax  यहां, हम   उपयोग करने जा रहे हैं, जो, मेरा मानना है, कंटेनर क्वेरी इनलाइन के लिए है। एक   इकाई कंटेनर की चौड़ाई के एक प्रतिशत के बराबर है। ठीक है, हमें बस यही चाहिए; यहां से, हम केवल आवश्यकतानुसार इकाइयाँ स्थापित कर रहे हैं। cqi cqi  यहां, हमारे पास कुछ कस्टम गुण हैं जिनका उपयोग इस विज्ञापन के कई तत्वों पर किया जाता है।   figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }  आइए इस बात से शुरू करें कि यह फ्रेम कंटेनर के बाहरी किनारे से कितना इनसेट है। आइए इसे तीन   बनाएं। cqi   figure { ... --frameInset: 3cqi; }  इसके बाद, आइए यहां बॉर्डर की मोटाई निर्धारित करें। इस मामले में, मैं सीमाओं को एक पिक्सेल के नीचे लगातार सिकुड़ने से रोकने के लिए   फ़ंक्शन का उपयोग करने जा रहा हूं, लेकिन मैं चाहता हूं कि वे तब तक गतिशील रहें जब तक वे उस एक-पिक्सेल मान से बड़े हों। max  तो, पहला मान एक पिक्सेल है, फिर दूसरा गतिशील मान है। आइए इसे एक   बनाएं। cqi   figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }  अब,   तत्व के लिए, जो मुख्य शीर्षक है, "वान्स" पाठ, आइए इसे पच्चीस   बनाएं। और, शीर्षक के नीचे की जगह के लिए, आइए इसे तीन   बनाएं। strong cqi cqi   strong { font-size: 25cqi; padding-bottom: 3cqi; }  अब, चलिए "ऑफ़ द वॉल" उपशीर्षक पर चलते हैं। इसका आकार मुख्य शीर्षक का लगभग आधा होना चाहिए, तो आइए बारह   प्रयास करें। और, पाठ के ऊपर की जगह के लिए, आइए फिर से तीन   के साथ चलें। cqi cqi   em { font-size: 12cqi; padding-top: 3cqi; }  ठीक है, अंतिम टुकड़े के लिए, "1966 से" लेबल, आइए छह   के फ़ॉन्ट आकार के साथ चलें। और, ऊपर और नीचे के स्थान के लिए, हम   के लिए तार्किक संपत्ति का उपयोग कर रहे हैं जो दो मान तक लेता है। पहला मान पाठ के ऊपर का मान है, और दूसरा मान नीचे के स्थान के लिए है। cqi padding-block  तो, चलिए उपरोक्त दो   के साथ चलते हैं। और, हमारी गणना में, हम   वैसे ही छोड़ देंगे, लेकिन हम पांच   अतिरिक्त स्थान के साथ जाएंगे। cqi --frameInset cqi   time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }  ठीक है बढ़िया, यह अच्छा लग रहा है।   आइए देखें कि यह कैसे प्रतिक्रिया देता है। जैसे ही हम इसे निचोड़ते हैं, सब कुछ ठीक से समान रूप से प्रतिक्रिया दे रहा है जैसा हम चाहते थे। यह काफी हद तक एक छवि जैसा दिखता है।   छोटा होने पर भी यह काफी अच्छा दिखता है, और आप देख सकते हैं कि बॉर्डर कभी भी एक पिक्सेल से नीचे नहीं सिकुड़ते। फिर, जब हम वास्तव में संकीर्ण चौड़ाई में आते हैं तो यह व्यापक हो जाता है, और सब कुछ अभी भी अच्छा दिखता है।   यह कितना अच्छा है? शैलियों का एक सेट, और यह हर तरह से काम करता है। जैसे-जैसे हम इसे आगे-पीछे करते हैं, यह बहुत अच्छा दिखता है।  अब, इससे भी अच्छी बात यह है कि हम अपना विज्ञापन मार्क-अप ले सकते हैं, इसे यहां या मुख्य कॉलम क्षेत्र में ले जा सकते हैं, और सब कुछ वैसे ही काम करता रहेगा जैसे कि यह एक छवि होती।     <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div>  यह बहुत अच्छा और बढ़िया है। याद रखें, यह सब करने के लिए शैलियों का केवल एक ही सेट है। और, शून्य मीडिया प्रश्न शामिल थे। समग्र रूप से कंटेनर क्वेरीज़ में काफी कुछ है, इसलिए भविष्य की पोस्टों पर नज़र रखें जहां मैं विभिन्न पहलुओं को कवर करूंगा।  क्या आप इसे क्रियान्वित होते देखना चाहते हैं?  नीचे कोडपेन उदाहरण में इन तकनीकों के डेमो कोड और उदाहरण देखें। यदि आपका कोई प्रश्न या विचार है, तो टिप्पणी छोड़ने में संकोच न करें।   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

HTML: CSS कंटेनर क्वेरीज़ के साथ किसी छवि का आकार कैसे बदलें!

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

उपयोगकर्ता-केंद्रित क्रिप्टो उत्पाद बनाना: ग्राहक प्रतिक्रिया का महत्व

अपने वर्कफ़्लो को 10 गुना बेहतर कैसे बनाएं: 17 ज़रूरी ऐप्स

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps