पृष्ठभूमि छवि खिंचाव 100% की ऊंचाई

Question

मेरे पास एक कंटेनर है जो ऊंचाई में बढ़ता/घटता है इस पर निर्भर करता है कि इसमें कितना टेक्स्ट गतिशील रूप से रखा गया है। कंटेनर में एक पृष्ठभूमि छवि होगी जिसमें कंटेनर की ऊंचाई बढ़ने के साथ खिंचाव/हटाना होगा और इस छवि को किसी भी तरह से फसल नहीं किया जा सकता है। मैं सोच रहा हूं कि पृष्ठभूमि छवि को div के 100% रहने के लिए मैं .container कैसे शैली दूंगा।

मैं निम्नलिखित की कोशिश की है, लेकिन यह काम करने के लिए नहीं लगता था: HTML संरचना की

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; } 

नमूना:

<div class="container"> 
    <p class="text">This is a short container</p> 
</div> 

<div class="container"> 
    <p class="text">This<br> is<br> a<br> tall<br> container</p> 
</div> 

Answer 1

आपको background-size संपत्ति सेट करने की आवश्यकता है। background-size: 100% 100%; कंटेनर को क्षैतिज और लंबवत दोनों भरने के लिए स्केल करेगा।

मैं आमतौर पर background-size: cover; पसंद करता हूं क्योंकि यह पहलू अनुपात को बनाए रखने के लिए आवश्यक रूप से छवि को स्केल करता है। पृष्ठभूमि आकार के लिए support जांचना सुनिश्चित करें, क्योंकि यह एक बिल्कुल नई संपत्ति है।

Answer 2

आप background-size: cover; की कोशिश की?

आपके उदाहरण में आप background-position समायोजित कर रहे हैं।

Answer 3

सीएसएस 3 में एक संपत्ति है जिसे पृष्ठभूमि आकार: कवर कहा जाता है; और पृष्ठभूमि आकार: होते हैं; आप अपनी आवश्यकताओं के अनुरूप background-size:cover; का उपयोग करना चाह सकते हैं।

** contain

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

cover 

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

**

Answer 4

मामले background-size: contain; में उपयोगी नहीं है और आप खो पहलू अनुपात के बिना देख रहे हैं पूरी ऊंचाई पृष्ठभूमि छवि के लिए तो नीचे लिखा सीएसएस

background-size: auto 100%; 

की स्थापना पहले पैरामीटर "करने के लिए उपयोग ऑटो "यह सुनिश्चित करेगा कि छवि वर्तमान ऊंचाई के अनुपात में चौड़ाई रखती है। दूसरा पैरामीटर जो "100%" पृष्ठभूमि छवि को डीआईवी के समान ऊंचाई को अनुकूलित करने में मदद करेगा।