पृष्ठभूमि-आकार: कवर काम नहीं कर रहा है?

Question

यह मेरा पेज http://inogroup.it/preload/index.htm

छवि बॉक्स की चौड़ाई

कैसे ऊंचाई भी प्रतिक्रिया देने के लिए स्थापित करने के लिए उत्तरदायी है? 50% स्क्रीन की तरह?

अगर मैं इस परिवर्तन कार्य करें:

.pattern{ 
    background-size: contain; 
    margin-bottom:25px; 
    width:100%; 
    height:50%; 
} 

यह काम नहीं कर रहा

आपको बहुत बहुत धन्यवाद!

Answer 1

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

आप एक संवेदनशील छवि बनाने के लिए (चौड़ाई और ऊंचाई दोनों में) निम्नलिखित कोड का उपयोग कर सकते नवीनतम बूटस्ट्रैप के संस्करण में:

<img src="images/my_img" class="img-responsive" /> 

इस के लिए

क्रम में काम करने के लिए, आप नवीनतम डाउनलोड करने के लिए की आवश्यकता होगी बूटस्ट्रैप का संस्करण उनकी वेबसाइट से (http://getbootstrap.com/) और आपके कोड में संदर्भ।

Answer 2

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

.pattern-container .pattern { 
    background-size: cover; 
    background-position: 50% 50%; 
    <!-- other rules here --> 
} 

पोजिशनिंग 50% 50% खड़ी रूप में पृष्ठभूमि छवियों और क्षैतिज परवाह किए बिना युक्त div में यह केन्द्रों div के आयामों का। उस ने कहा, छवि छवि के पहलू अनुपात से कम है, तो छवि स्वयं ही किनारों पर फसल कर सकती है (उदाहरण के लिए यदि div 30px चौड़ा और 10px ऊंचा है, और छवि 40px चौड़ी और 10px ऊंची है, तो छवि दोनों तरफ से 5px खोने जा रहा है)।

Answer 3

पृष्ठभूमि आकार: पृष्ठभूमि के बाद आने की जरूरत है: मुझे नहीं पता कि यह सभी ब्राउज़रों के लिए सच है, लेकिन यह निश्चित रूप से क्रोम की एक विशेषता है जो आपको पागल कर सकती है।

Answer 4

आपको पृष्ठभूमि छवि को परिभाषित करने के लिए background-image संपत्ति का उपयोग करने की आवश्यकता है।

तो यह

<img class="image" style="background: url(image.jpg);" />

.image { background-size: cover; }

काम नहीं करेगा क्योंकि पृष्ठभूमि आशुलिपि कोड है और सभी को छोड़ दिया पैरामीटर के लिए डिफ़ॉल्ट मान लेता है।

लेकिन आप इस

<img class="image" style="background-image: url(image.jpg);" />

.image { background-size: cover; }

ऐसा करते हैं तो wil समस्या का समाधान।