पृष्ठभूमि चित्र: कैसे पूरे div को भरने के लिए है, तो छवि छोटे और इसके विपरीत

है मैं तीन समस्या है:पृष्ठभूमि चित्र: कैसे पूरे div को भरने के लिए है, तो छवि छोटे और इसके विपरीत

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

2011-01-24 Aakash Sahai

@ डेविड-कैन आप सबसे उपयुक्त अद्यतन करना चाहिए – Ouadie

@Ouadie के नीचे टिप्पणियों के अनुसार उत्तर दिए गए उत्तर - मैं मूल पोस्टर नहीं हूं - मैंने केवल स्पष्टता के लिए प्रश्न संपादित किया है। –

@ आकाश-सहई क्या आप कृपया सबसे उपयुक्त स्वीकार्य उत्तर को अपडेट कर सकते हैं? – Ouadie

div आकार को फिट करने के लिए छवि का आकार बदलें।
CSS3 के साथ आप यह कर सकते हैं:

/* with CSS 3 */ 
#yourdiv { 
    background: url('bgimage.jpg') no-repeat; 
    background-size: 100%; 
}

How Do you Stretch a Background Image in a Web Page:

अस्पष्टता के बारे में

#yourdiv { 
    opacity: 0.4; 
    filter: alpha(opacity=40); /* For IE8 and earlier */ 
}

या CSS Image Opacity/Transparency

स्रोत

2011-01-24 07:28:21 yossi

लेकिन यह कई छवियों को लोड करने के लिए सर्वर पर बोझ पैदा करेगा (जो समान है, जैसा कि पता है) .. इसलिए एक छवि और strechg n collasping का उपयोग करके कई छवियों का उपयोग करना एक बेहतर तरीका है .. लेकिन यह नहीं पता कि यह कैसे .. अस्पष्टता के मुद्दे के लिए –

thanx ... –

प्वाइंट 1 और 2 इस समस्या का समाधान नहीं है। पहला बिंदु एक तस्वीर पर पहलू अनुपात रखने के लिए है, दूसरा बिंदु बिल्कुल काम नहीं कर रहा है। CSS3 के साथ पृष्ठभूमि-आकार की संपत्ति इस समस्या को ठीक करेगी, तब तक आपको कुछ हैक के साथ चिपकना होगा .. – Sondre

मैं योसी के उदाहरण से सहमत को देखो, खिंचाव div को फिट करने के लिए छवि लेकिन मैं n थोड़ा अलग तरीका (पृष्ठभूमि-छवि के बिना क्योंकि यह सीएसएस 2.1 में थोड़ा लचीला है)। छवि के
```
<div id="yourdiv"> 
    <img id="theimage" src="image.jpg" alt="" /> 
</div> 

#yourdiv img { 
    width:100%; 
    /*height will be automatic to remain aspect ratio*/ 
} 
```
दिखाएँ हिस्सा पृष्ठभूमि स्थिति का उपयोग: पूर्ण छवि दिखाएँ
```
#yourdiv 
{ 
    background-image: url(image.jpg); 
    background-repeat: no-repeat; 
    background-position: 10px 25px; 
} 
```
की (1) छवि div करने के लिए स्केल करेगा पहले भाग के रूप में एक ही तो बड़ा या छोटा दोनों काम करेंगे
योसी के समान।

स्रोत

2011-01-24 07:52:21 Bazzz

गलती, मेरी पोस्ट का स्वरूपण काम नहीं किया? मैंने टूलबार आइकन का उपयोग किया ... :( – Bazzz

मैंने इसे पहले और एनडब्ल्यू भी कोशिश की .. अगर छवि का आकार 100 पीएक्स 100 पीएक्स है और div में 400px 400px आकार है तो यह शीर्ष कोने पर तय है .itz नहीं strechg..background-size नहीं काम कर रहे हैं .. यानी 8, फ़ायरफ़ॉक्स, क्रोम, सफारी नवीनतम ब्राउज़र –

यहां एक उदाहरण है: http://jsfiddle.net/9mawE/1/ div 150px चौड़ा है। Google लोगो 150px से अधिक चौड़ा है लेकिन नीचे स्केल किया गया है div में फिट करने के लिए। Google धरती आइकन 150px चौड़ा से कम है और 150px चौड़ा div फिट करने के लिए बढ़ाया गया है, पृष्ठभूमि आकार IE 8 में काम नहीं करता है क्योंकि यह सीएसएस 3 है जो अभी भी असमर्थित है। – Bazzz

बल्कि background-size:100%;
देने से हम उपलब्ध विभिन्न विकल्पों के लिए यह पता दे सकते हैं background-size:contain;
की जांच: http://www.css3.info/preview/background-size/

स्रोत

2013-08-22 07:35:14 vivekj011

स्वतः ही छवि के विस्तार और इसके बारे में रिक्त किसी भी भाग से बाहर निकले बिना पूरे div अनुभाग को कवर करने के , उपयोग करें:

background-size: cover;

स्रोत

2014-01-14 11:31:22 Ouadie

छोटी टिप्पणी इस पृष्ठ और मेरे मामले में सबसे बड़ा लाभ। धन्यवाद –

मेरे लिए काम नहीं करता है लेकिन मेरा div के अंदर के अंदर

के अंदर है। पता नहीं है कि – user1709076

क्या आप अपने पूर्व के लिए jsfiddle बना सकते हैं पर्याप्त इसलिए हम आपकी मदद कर सकते हैं – Ouadie

यह एक आकर्षण की तरह काम करेगा।

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png"); 
background-repeat: no-repeat; 
background-size: contain;

स्रोत

2015-04-15 08:39:03

धन्यवाद। विशेष रूप से उस के लिए देख रहा था। क्या यह साल पहले था और भूल गया। –

में पूरे div को शामिल नहीं किया गया है। ऐसा लगता है कि ओप क्या तलाश रहा है। – user3629945

कोड खंड नीचे का प्रयास करें, मैं इसे अपने आप से पहले की कोशिश की है:

#your-div { 
    background: url("your-image-link") no-repeat; 
    background-size: cover; 
    background-clip: border-box; 
}

स्रोत

2015-06-08 19:01:46

स्टैक ओवरफ़्लो में आपका स्वागत है! हालांकि यह उत्तर शायद सही और उपयोगी है, लेकिन अगर आप इस समस्या को हल करने में मदद करते हैं, तो यह समझाने के लिए इसमें कुछ स्पष्टीकरण शामिल है। यह भविष्य में विशेष रूप से उपयोगी हो जाता है, यदि कोई परिवर्तन (संभावित रूप से असंबंधित) है जो इसे काम करना बंद कर देता है और उपयोगकर्ताओं को यह समझने की आवश्यकता होती है कि यह एक बार कैसे काम करता है। –

यह मेरे लिए पूरी तरह से काम किया

background-repeat: no-repeat; 
background-size: 100% 100%;

स्रोत

2017-10-05 10:27:23

संबंधित मुद्दे