दिलचस्प पोस्ट
क्या किसी पाश के भीतर या बाहर एक चर को घोषित करना बेहतर है? पायथन 2.7 से पहले डिक्की समझ के लिए वैकल्पिक IPhone में पॉपअप के रूप में प्रदर्शन UIViewController स्प्रिंग कंटेनर में सिंगलटन डिजाइन पैटर्न सिंगलटन सेम बनाम MySQL में अक्षांश और देशांतर का उपयोग करते हुए दो बिंदुओं के बीच की दूरी ढूंढें थ्रेड के संदर्भ वर्ग लोडर और सामान्य क्लासलोडर के बीच का अंतर क्यों नहीं <fieldset> फ्लेक्स कंटेनर हो सकता है? डीजेन्गो में अलग अलग स्तंभों का चयन करें? फ़्लोटिंग प्वाइंट कैसा है? जब यह बात करता है? एक बड़ी SQL स्क्रिप्ट निष्पादित करें (GO कमांड्स के साथ) ब्लूटूथ के माध्यम से एंड्रॉइड पर फाइल कैसे भेजें? आईफोन पर भाषण के लिए पाठ डेटा टाइमटाइम्स के भीतर डेटा सबसेट समय फ़्रेम लौटें? लिनक्स ब्लॉकिंग बनाम गैर अवरुद्ध सीरियल पढ़ें डेटाग्रिड कॉलम चौड़ाई ऑटो-अपडेट नहीं करता है

उत्तरदायी सीएसएस पृष्ठभूमि छवियों

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

असल में मैं क्या हासिल करना चाहता हूं यह है कि छवि (वाटरमार्क 'जी' के साथ) छवि का कम प्रदर्शन किए बिना स्वचालित रूप से आकार बदलती है यदि यह संभव है तो

लिंक: जी-फ्लायर्स.ईयू

कोड मेरे पास अब तक (सामग्री का भाग)

#content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; } 

Solutions Collecting From Web of "उत्तरदायी सीएसएस पृष्ठभूमि छवियों"

यदि आप समान विंडो को ब्राउज़र विंडो के आकार के आधार पर स्केल करना चाहते हैं:

 background-image:url('../images/bg.png'); background-repeat:no-repeat; background-size:contain; background-position:center; 

चौड़ाई, ऊंचाई या मार्जिन सेट न करें

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

 background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; 

इसे इस्तेमाल करे :

 background-image: url(_images/bg.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; 

सीएसएस:

 background-size: 100%; 

यह ट्रिक काम आना चाहिए! 🙂

यहाँ मैं इस्तेमाल संवेदनशील पृष्ठभूमि छवि के लिए sass मिक्सिन है यह किसी भी block तत्व के लिए काम करता है बेशक, समान सादे सीएसएस में काम कर सकते हैं आपको मैन्युअल रूप से padding गणना करना होगा।

 @mixin responsive-bg-image($image-width, $image-height) { background-size: 100%; height: 0; padding-bottom: percentage($image-height / $image-width); display: block; } .my-element { background: url("images/my-image.png") no-repeat; // substitute for your image dimensions @include responsive-bg-image(204, 81); } 

उदाहरण http://jsfiddle.net/XbEdW/1/

मुझे सबसे अच्छा तरीका मिल गया है

 #content { background-image:url('smiley.gif'); background-repeat:no-repeat; background-size:cover; } 

W3schools पर जांचें

अधिक उपलब्ध विकल्प

 background-size: auto|length|cover|contain|initial|inherit; 

यह एक आसान है =)

 body { background-image: url(http://img.hiwab.com/css/photo.jpeg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } 

Jsfiddle डेमो पर एक नज़र डालें

मैंने # सामग्री #content { width: 100%; height: 500px; background-size: cover; background-position: center top;} #content { width: 100%; height: 500px; background-size: cover; background-position: center top;} #content { width: 100%; height: 500px; background-size: cover; background-position: center top;} जो वास्तव में अच्छी तरह से काम किया

इसे इस्तेमाल करे

 ` #container { background-image: url("../images/layout/bg.png"); background-repeat: no-repeat; background-size: 100% 100%; height: 100vh; margin: 3px auto 0; position: relative; }` 

मैं आशा करता हूँ यह काम करेगा

आप इसका उपयोग कर सकते हैं मैंने परीक्षण किया है और इसकी 100% काम सही है:

 background-image:url('../images/bg.png'); background-repeat:no-repeat; background-size:100%; background-position:center; 

आप इस स्क्रीन साइज सिम्युलेटर पर अपनी वेबसाइट की प्रतिक्रिया के साथ परीक्षण कर सकते हैं: http://www.infobyip.com/testwebsiteresolution.php

हर बार जब आप परिवर्तन करते हैं तो आपका कैश साफ़ करें और मैं इसे जांचने के लिए फ़ायरफ़ॉक्स का उपयोग करना पसंद करूंगा।

यदि आप एक छवि प्रपत्र का अन्य साइट / यूआरएल का उपयोग करना चाहते हैं और पसंद नहीं है: background-image:url('../images/bg.png'); // यह संरचना आपके होस्ट किए गए सर्वर से छवि का उपयोग करना है फिर इस तरह का प्रयोग करें: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

का आनंद लें 🙂

उत्तर की ऊंचाई / चौड़ाई x 100 = पैडिंग-नीचे% में जोड़ें पैडिंग द्वारा उत्तरदायी वेबसाइट:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/


अधिक जटिल विधि:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios


जादू की अच्छी स्क्रिप्ट देखने के लिए पृष्ठभूमि का आकार बदलने की कोशिश करें Firefox फ़ायरफ़ॉक्स Ctrl + M मुझे सबसे अच्छा लगता है:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

  <style> * { padding: 0; margin: 0; box-sizing: border-box; } #res_img { background: url("http://img.hiwab.com/css/image-slider-1.jpg"); width: 100%; height: 500px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border: 1px solid red; } @media screen and (min-width:300px) and (max-width:500px) { #res_img { width: 100%; height: 200px; } } </style> <div id="res_img"> </div> 

यदि आप चाहते हैं कि पूरे चित्र को पहलू अनुपात के बावजूद दिखाने के लिए, तो यह कोशिश करें:

 background-image:url('../images/bg.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center; 

यह पूरी छवि को दिखाएगा, चाहे स्क्रीन आकार क्या हो।

JQuery के साथ वर्ग अनुपात के लिए अनुकूली

 var Height = $(window).height(); var Width = $(window).width(); var HW = Width/Height; if(HW<1){ $(".background").css("background-size","auto 100%"); } else if(HW>1){ $(".background").css("background-size","100% auto"); } 

सिर्फ दो लाइन कोड, यह काम करता है

 #content { background-image: url('../images/bg.png'); background-size: cover; } 
 background:url("img/content-bg.jpg") no-repeat; background-position:center; background-size:cover; 

या

 background-size:100%; 

मुझे लगता है, यह करने का सबसे अच्छा तरीका यह है:

 body { font-family: Arial,Verdana,sans-serif; background:url("/images/image.jpg") no-repeat fixed bottom right transparent; } 

इस तरह से कुछ और करने की कोई आवश्यकता नहीं है और यह काफी आसान है।

कम से कम, यह मेरे लिए काम करता है

मुझे उम्मीद है यह मदद करेगा।