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

क्या आप जानते हैं कि वेबसाइट बनाते समय किसी छवि का उपयोग करने से बेहतर क्या हो सकता है? HTML और CSS के साथ कुछ ऐसा बनाने के बारे में क्या ख़याल है जो एक छवि की तरह दिखता और काम करता है? और आप जानते हैं, कंटेनर क्वेरीज़ के साथ यह अब बहुत आसान है। इस पोस्ट में, हम HTML और CSS के साथ एक विज्ञापन बनाने जा रहे हैं, जो एक छवि जैसा दिखता है।

फिर हम इसे एक छवि की तरह बनाने जा रहे हैं क्योंकि यह दब जाएगा, विस्तारित हो जाएगा और दस्तावेज़ के भीतर अन्य स्थानों पर ले जाया जाएगा। ठीक है, आइए इसकी जाँच करें!

ठीक है, तो हमारे पास यह वैन विज्ञापन उस साइट के साइडबार में है जिसे हम बना रहे हैं, और यह वर्तमान में एक छवि है।

इससे संपादन करना कठिन हो जाता है; यदि कुछ बदलने की आवश्यकता है तो एक डिजाइनर को इसे अपडेट करना होगा और हमें एक नई छवि प्रदान करनी होगी।

इसके अलावा, हमें संभवतः स्रोत सेट के साथ उपयोग करने के लिए कई संस्करणों की आवश्यकता होगी ताकि यह उच्च-घनत्व और कम-रिज़ॉल्यूशन दोनों डिस्प्ले पर कुरकुरा दिखे।

इसलिए, हमें इसे 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> 

यह बहुत अच्छा और बढ़िया है। याद रखें, यह सब करने के लिए शैलियों का केवल एक ही सेट है। और, शून्य मीडिया प्रश्न शामिल थे। समग्र रूप से कंटेनर क्वेरीज़ में काफी कुछ है, इसलिए भविष्य की पोस्टों पर नज़र रखें जहां मैं विभिन्न पहलुओं को कवर करूंगा।

क्या आप इसे क्रियान्वित होते देखना चाहते हैं?

नीचे कोडपेन उदाहरण में इन तकनीकों के डेमो कोड और उदाहरण देखें। यदि आपका कोई प्रश्न या विचार है, तो टिप्पणी छोड़ने में संकोच न करें।