उत्तरदायी पृष्ठभूमि छवियाँ

अनुकूली लेआउट में मुख्य कार्यों में से एक छवियों को स्केल करना है (पृष्ठभूमि वाले सहित) ताकि वे विभिन्न स्क्रीन रिज़ॉल्यूशन वाले उपकरणों पर सही ढंग से प्रदर्शित हों।

Img टैग में छवियों के साथ, सब कुछ सरल है: जब आप चौड़ाई को प्रतिशत के रूप में सेट करते हैं, तो ऊंचाई स्वचालित रूप से बढ़ जाएगी। यह विधि पृष्ठभूमि छवि पर लागू नहीं की जा सकती।

निश्चित पहलू अनुपात

यह चाल तत्व के पैडिंग के प्रतिशत के रूप में मूल्य निर्धारित करने के लिए है। विधि पहली बार एक पुरानी ए सूची के अलावा ब्लॉग लेख में प्रकाशित हुई थी, लेकिन यह अभी भी अच्छी तरह से काम करती है।

मान लीजिए कि there०० से ४५० पिक्सल की पृष्ठभूमि छवि है, और आपको इसे १६: ९ के निश्चित पहलू अनुपात के साथ पृष्ठभूमि बनाने की आवश्यकता है। नीचे दिए गए कोड में, px का उपयोग इंडेंटेशन के लिए किया जाता है, लेकिन सब कुछ em के साथ भी काम करेगा। एक HTML5 आंकड़ा तत्व भी है, पुराने ब्राउज़रों में इसके सही संचालन के लिए आप HTML5 शिव का उपयोग कर सकते हैं।

<div class="column"> <figure class="fixedratio"></figure> </div> 

 div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ } 

प्रदर्शन

पृष्ठभूमि जोड़ें

परिणामी तत्व को आवश्यकतानुसार बढ़ाया जाता है, लेकिन यदि आप एक पृष्ठभूमि छवि जोड़ते हैं, तो परिणाम बहुत अच्छा नहीं होगा। पृष्ठभूमि-आकार का उपयोग करें : कवर विशेषता। दुर्भाग्य से, इंटरनेट एक्सप्लोरर 8 में यह विधि काम नहीं करती है। इस समस्या को हल करने के लिए, पृष्ठभूमि-स्थिति का उपयोग करके पृष्ठभूमि को रखें । पृष्ठभूमि की छवि तत्व की अधिकतम-चौड़ाई की चौड़ाई में कम से कम बराबर होनी चाहिए। अन्यथा, चित्र को काट दिया जाएगा।

 <div class="column"> <figure class="fixedratio"></figure> </div> 

 div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } 

प्रदर्शन

रबर पहलू अनुपात

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



उदाहरण के लिए, छोटे स्क्रीन पर 800 से 200 पिक्सल (4: 1) की चौड़ाई के साथ 300 पिक्सल की चौड़ाई के साथ एक तस्वीर को 150 पिक्सल (2: 1) तक कम किया जाना चाहिए। आइए ऊंचाई और गद्दी-शीर्ष विशेषताओं की गणना करें:



आकृति अलग-अलग चौड़ाई के साथ पृष्ठभूमि छवि के पहलू अनुपात को दिखाती है। ग्राफ का ढलान गद्दी-शीर्ष विशेषता से मेल खाता है, प्रारंभिक ऊंचाई (शुरू ऊंचाई) ऊंचाई विशेषता से मेल खाती है। परिणाम कोड है:

 <div class="column"> <figure class="fluidratio"></figure> </div> 

 div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } 

प्रदर्शन

गणना करने के लिए SCSS का उपयोग करना

पैडिंग-टॉप और ऊंचाई विशेषताओं को SCSS जैसे प्रीप्रोसेसर का उपयोग करके स्वचालित रूप से गणना की जा सकती है। इसका एक उदाहरण:

 /* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); } 

Voormedia.com लेख से लिया गया उदाहरण।