डिव को भरने के लिए बैकग्राउंड इमेज को कैसे स्ट्रेच करें

Question

मैं अलग-अलग divs के लिए एक पृष्ठभूमि छवि सेट करना चाहता हूं, लेकिन मेरी समस्याएं हैं:

1. छवि का आकार तय किया गया है (60px)।
2. भिन्न का आकार

मैं पूरी पृष्ठभूमि को भरने के लिए पृष्ठभूमि-छवि को कैसे बढ़ा सकता हूं?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

यहां कोड चेक करें।

Answer 1

जोड़ना

background-size:100% 100%;

पृष्ठभूमि-छवि के नीचे अपने सीएसएस के लिए।

आप सटीक आयाम भी निर्दिष्ट कर सकते हैं, अर्थात:

background-size: 30px 40px;

यहाँ: JSFiddle

Comments

IE इस का समर्थन नहीं करते। क्या करना है?

— करशो

यह काम नहीं करता है, बेहतर उत्तर के लिए bellow देखें: पृष्ठभूमि का आकार: 100% 100%;

— क्रिसट्रोफ़

कंटेनर को फिट करने के लिए छवि को लंबा

— SearchForKnowledge

आपको जोड़ने की आवश्यकता हैbackground-repeat: no-repeat;

— रोरिक

hendo, आपका JSField अब काम नहीं कर रहा है (hootsuite के डेड लिंक), क्या आप इसे अपडेट कर सकते हैं?

— TylerH

Answer 2

आप उपयोग कर सकते हैं:

background-size: cover;

या बस के साथ एक बड़ी पृष्ठभूमि छवि का उपयोग करें:

background: url('../images/teaser.jpg') no-repeat center #eee;

Comments

कवर

— नॉट स्ट्रेच

मैं नहीं जानता कि आप अपनी पृष्ठभूमि के साथ क्या करने की कोशिश कर रहे हैं, लेकिन छवि को background-size: cover; background-position: centerdiv

— खींचे

उन चित्रों के लिए बढ़िया काम करता है जहाँ स्ट्रेचिंग से छवि ख़राब होती है!

— Stijn Van Bael

Answer 3

आधुनिक CSS3 (भविष्य के लिए अनुशंसित और संभवतः सबसे अच्छा समाधान)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

मैक्स। फसल के बिना खिंचाव और न ही विरूपण (पृष्ठभूमि नहीं भर सकता) : background-size: contain;
बल पूर्ण खिंचाव (विरूपण का कारण हो सकता है, लेकिन कोई फसल नहीं) : background-size: 100% 100%;

"पुराना" सीएसएस "हमेशा" काम करने का तरीका

(रिश्तेदार तैनात) माता-पिता के पहले बच्चे के रूप में पूर्ण स्थिति की छवि और माता-पिता के आकार तक खींच।

एचटीएमएल

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

CSS3 के बराबर background-size: cover;:

इसे गतिशील रूप से प्राप्त करने के लिए, आपको सम्‍मिलित विधि विकल्‍प (नीचे देखें) के विपरीत का उपयोग करना होगा और यदि आपको फसली छवि को केंद्र में रखने की आवश्यकता है, तो आपको गतिशील रूप से ऐसा करने के लिए जावास्क्रिप्ट की आवश्यकता होगी - जैसे jQuery का उपयोग करना:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

व्यावहारिक उदाहरण:

CSS3 के बराबर background-size: contain;:

यह एक थोड़ा मुश्किल हो सकता है - आपकी पृष्ठभूमि का आयाम जो माता-पिता को अतिप्रवाह करेगा, सीएसएस को ऑटो से दूसरे को 100% सेट किया जाएगा। व्यावहारिक उदाहरण:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

CSS3 के बराबर background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

पुनश्च: कवर के समकक्ष करने के लिए / पूरी तरह से गतिशील रूप से "पुराने" तरीके से होते हैं (इसलिए आपको ओवरफ्लो / अनुपात के बारे में परवाह नहीं करनी होगी) आपको अपने लिए अनुपात का पता लगाने और वर्णित के रूप में आयाम सेट करने के लिए जावास्क्रिप्ट का उपयोग करना होगा। ..

Comments

दूसरे "कवर" उत्तर की तुलना में अधिक पूर्ण उत्तर दें। दुर्भाग्य से, यह नीचे की ओर नीचे की ओर यहाँ अटक गया है ...

— बिलीनेयर

Answer 4

इसके लिए आप CSS3 background-sizeप्रॉपर्टी का उपयोग कर सकते हैं। इस तरह लिखें:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

इसे देखें: http://jsfiddle.net/qdzaw/1/

Comments

IE इस का समर्थन नहीं करते। क्या करना है?

— करशो

IE उपयोग के लिए IMG टैग ऊंचाई और चौड़ाई 100% के साथ पूर्ण स्थान देता है।

— संदीप

Answer 5

आप जोड़ सकते हो:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

आप इसके बारे में और अधिक यहाँ पढ़ सकते हैं: css3 पृष्ठभूमि-आकार

Comments

स्वीकृत उत्तर की तुलना में बहुत बेहतर, यह आपको दिखाता है कि पृष्ठभूमि का आकार चौड़ाई और ऊंचाई के लिए 2 मान स्वीकार करता है।

— krb686

पृष्ठभूमि-आकार एक css3 है और सभी ब्राउज़रों में समर्थित नहीं है

— Mahdi Jazini

Answer 6

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

Answer 7

संपत्ति सीएसएस का उपयोग करके:

background-size: cover;

Comments

बैकग्राउंड-साइज़ एक css3 है और सभी ब्राउज़रों में समर्थित नहीं है

— Mahdi Jazini

Answer 8

का उपयोग करें: पृष्ठभूमि का आकार: 100% 100%; Div आकार फिट करने के लिए पृष्ठभूमि छवि बनाने के लिए।

Comments

यह वही है जिसकी मैं तलाश कर रहा था - मूल पहलू अनुपात की परवाह किए बिना फिट होने के लिए खिंचाव। धन्यवाद।

— dgig

Answer 9

पहलू अनुपात रखने के लिए, का उपयोग करें background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

Answer 10

कुछ इस तरह की कोशिश करो:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}