सीएसएस पृष्ठभूमि छवि आकार चौड़ाई फसल ऊंचाई

Question

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

मेरे पास एक माध्यमिक समस्या यह है कि यह तब तक काम नहीं कर रहा है जब तक कि मैं नीचे यूआरएल की बजाय छवि के लिए FQDN का उपयोग नहीं करता।

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Answer 1

background-size: cover; 

के बजाय

आप उपयोग करना चाहते जाएगा

background-size: 100% auto; 

कवर वाली सबसे छोटी करने के लिए छवि को फैलाने होगा ऐसी है कि दोनों इसकी चौड़ाई और इसकी ऊंचाई सामग्री के अंदर फिट कर सकते हैं क्षेत्र, इसलिए आपका मुद्दा। उस over here के बारे में और देखें।

Answer 2

मैं इसके बजाय जेएस का उपयोग करूंगा। सीएसएस अभी तक पहलू अनुपात को संभालने के लिए प्रतीत नहीं होता है।

बाहर कुछ इस तरह का प्रयास करें:

सबसे पहले, एक div बनाने और इसे में एक छवि डाल

<div class="big-image"> 
    <img src="path.jpg" width="1000" height="1000" alt="whatever"> 
</div> 

फिर अपने सीएसएस में ऐसा करते हैं:

.featuredImage img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -10; 
} 
/* this class will be added via JS */ 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; } 

और अंत में, अपने जेएस

var theWindow = $(window), 
    $bg = $(".big-image img"), // Use your image selector here. 
    aspectRatio = $bg.width()/$bg.height(); 

    $bg.removeAttr('width'); 
    $bg.removeAttr('height'); 

    function resizeBg() { 
    if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
     $bg 
     .removeClass() 
     .addClass('bgheight'); 
    } else { 
     $bg 
     .removeClass() 
     .addClass('bgwidth'); 
    } 
    } 
    theWindow.resize(function() { 
    resizeBg(); 
    }).trigger("resize"); 

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

Answer 3

जब आप cover का उपयोग करते हैं तो छवि पहलू अनुपात नहीं बदला जाता है। हालांकि, मुझे विश्वास है कि आप छवि के निचले भाग को ठीक करना चाहते हैं, क्योंकि आपने कहा था कि आप इसे शीर्ष से फसल के लिए चाहते हैं, केंद्र नहीं, जिसे मैंने सोचा था कि आप ऊपर और नीचे से नहीं कहना चाहते थे।

यदि आप निचले हिस्से में नीचे रखना चाहते हैं, (शायद एक बड़े पैमाने पर बड़े आकाश के साथ घास का मैदान?) तो आपको center center से स्थिति center bottom में बदलना होगा।

यदि आप नाइट के रूप में 100% ऑटो बनाते हैं, तो उस विंडो पर जहां एचटीएमएल तत्व की ऊंचाई/चौड़ाई अनुपात आपकी छवि से बड़ा होता है, तो आपको शीर्ष पर खाली स्थान दिखाई देगा जो आप चाहते थे जो विशेष रूप से हो यदि आप ऐसी छवि का उपयोग कर रहे हैं जो शीर्ष पर एक ही रंग में फीका है ...

आपकी दूसरी समस्या के लिए, यह fqdn नहीं है, यह आपके पथ का सापेक्ष/पूर्ण संदर्भ है। आपके सीएसएस के अनुसार, एक छवि फ़ोल्डर होना चाहिए जहां आपकी सीएसएस फ़ाइल है जिसमें इसमें bg.jpg है।

index.html 
main.css 
images/ 
    bg.jpg