हम "लेआउट प्लेसहोल्डर फॉर इमेजेस" कार्य के उदाहरण का उपयोग करते हुए पैडिंग-टॉप प्रॉपर्टी के लिए प्रतिशत कार्य के सिद्धांत का अध्ययन करते हैं

जब हम साक्षात्कार से गुजरते हैं, तो हमसे अक्सर लेआउट के बारे में सवाल पूछे जाते हैं। अक्सर वे प्रदर्शन संपत्ति के मूल्यों को सूचीबद्ध करने या तत्वों को केंद्रित करने के लिए नीचे आते हैं। यह स्पष्ट रूप से मुझे परेशान करता था, और मैं अपने स्वयं के कार्यों के साथ आना चाहता था, जिनकी मदद से मैं लेआउट कौशल का परीक्षण कर सकता हूं, न कि कैसे उन्होंने गुणों के मूल्यों को याद किया।

कार्य विवरण

अक्सर, जब मैं इंटरनेट पर लेख पढ़ता हूं, तो मुझे निम्नलिखित समस्या आती है: छवि लोड होने पर पाठ कूदना शुरू हो जाता है।

इस समस्या का एक समाधान छवि के लिए एक प्लेसहोल्डर जोड़ना है, जिसमें चौड़ाई और ऊंचाई का अनुपात छवि के पहलू अनुपात को दोहराएगा।

मैं इसके कार्यान्वयन को मार्कअप के साथ शुरू करूंगा:

<div class="post"> <img src="example.jpg" class="post__img" alt="   "> </div> 

प्लेसहोल्डर के लिए आयाम सेट करने के लिए, आपको छवि के पहलू अनुपात को जानना होगा। एक उदाहरण के लिए मैं छवि आकार 1920x1080px का उपयोग करूंगा।

लेकिन अगर आप इस आकार की एक छवि प्रदर्शित करते हैं, तो अधिकांश स्क्रीन पर इसे क्षैतिज स्क्रॉलिंग के साथ प्रदर्शित किया जाएगा। इसलिए, मैं .post तत्व को 640px की अधिकतम चौड़ाई पर सेट करूंगा, और छवि की चौड़ाई इसे समायोजित कर देगी।

 .post { max-width: 640px; } .post__img { max-width: 100%; } 

मैं पहले छद्म तत्व का उपयोग करके पृष्ठ पर एक प्लेसहोल्डर जोड़ूंगा। आपको इसके शीर्ष पर छवि रखने के लिए याद रखने की भी आवश्यकता है।

 .post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; } 

अब आपको छवि की चौड़ाई को दोहराने के लिए प्लेसहोल्डर की चौड़ाई की आवश्यकता है। इससे पहले, मैंने छवि को मूल .post तत्व की चौड़ाई के 100% पर कब्जा कर लिया था। मैं प्रदर्शन जोड़कर पहले छद्म तत्व के लिए ऐसा ही करूंगा: इसे ब्लॉक करें।

 .post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; } 

दोस्तों, इस पर मैंने अपना काम पूरा कर लिया, और आपका काम पूरा हो गया। आपको पहले छद्म तत्व की ऊंचाई की गणना करने की आवश्यकता है।

ऐसा करने के लिए, प्रतिशत मान के साथ पेडिंग-टॉप प्रॉपर्टी का उपयोग करें। इसे सही ढंग से करने के लिए, आपको पैडिंग-टॉप प्रॉपर्टी में ब्याज की गणना की ख़ासियत को जानना होगा। और यह भी याद रखें कि छवि का आकार 1920x1080px है।

 .post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; /*    padding-top    % */ } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; } 

मुझे आशा है कि आप इस समस्या को स्वयं हल करने का प्रयास करेंगे। लेकिन अगर मुश्किलें आती हैं, तो नीचे मेरा समाधान है।

निर्णय

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

तदनुसार, यह जानते हुए और छवि के आकार (1920x1080px) को याद करते हुए, आप अनुपात का उपयोग करके प्लेसहोल्डर के लिए पैडिंग-टॉप की गणना कर सकते हैं:

 padding-top = ( * 100%) /  = (1080 * 100% ) / 1920 = 56.25% 

जहां शी और Vi छवि की चौड़ाई और ऊंचाई हैं।

यह पैडिंग-टॉप के लिए एक मूल्य जोड़ने के लिए बना हुआ है:

 .post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }