खिंचाव पृष्ठभूमि छवि सीएसएस?

Question

<td class="style1" align='center' height='35'>
  <div style='overflow: hidden; width: 230px;'>
    <a class='link' herf='' onclick='topic(<?=$key;?>)'>
      <span id='name<?=$key;?>'><?=$name;?></span>
    </a>
  </div>
</td>

यह मेरी CSS स्क्रिप्ट है

.style1 {
  background-image: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: left center;
}

मैं background-imageपूरे <td>सेल को फैलाना चाहता हूं

Comments

बस एक ध्यान दें कि रेखापुंज छवियों को फैलाने से गुणवत्ता में गिरावट आती है।

— wdm

stackoverflow.com/questions/376253/… का

— एलेक्स श्वेस्टरोव

@wdm: अगर यह svg है तो गुणवत्ता में गिरावट नहीं होगी।

— पॉज़िट लैब

Answer 1

.style1 {
  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;
}

काम में:

• सफारी 3+
• क्रोम जो भी +
• IE 9+
• ओपेरा 10+ (ओपेरा 9.5 समर्थित पृष्ठभूमि-आकार लेकिन कीवर्ड नहीं)
• फ़ायरफ़ॉक्स 3.6+ (फ़ायरफ़ॉक्स 4 गैर-विक्रेता उपसर्ग संस्करण का समर्थन करता है)

इसके अलावा आप एक IE समाधान के लिए यह कोशिश कर सकते हैं

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom: 1;

क्रिस कॉयर के इस लेख का श्रेय http://css-tricks.com/perfect-full-page-background-image/

Comments

यह ठीक काम कर रहा है, लेकिन मैं केवल ऊंचाई को खींचना चाहता हूं मैं कैसे कर सकता हूं

— बफ़न

यह काम करने में मदद के लिए धन्यवाद जब मैं बदल जाता हूं कि आपके कोड में -moz-background-size: 100% 100%;यह काम करता है जैसा कि मैं चाहता हूं ... धन्यवाद u

— बफॉन

एक और IE8 और कम समाधान: github.com/louisremi/background-size-polyfill

— Irongaze.com

background-size: cover;'पृष्ठभूमि-आकार: 100% 100%' में बदलने के बाद मेरे लिए काम किया ; `

— ivan.mylyanyk

मुझे एक निश्चित ऊंचाई (130px) और पूरी चौड़ाई की आवश्यकता थी। यह काम किया: background: url("images/bg.jpg") no-repeat center 0 fixed;और background-size: 100% 130px;(आदि)। यदि यह काफी छोटा था तो ऊंचाई को ध्यान में रखते हुए (उत्तर में) पृष्ठभूमि को छिपाएगा।

— स्लीपैरो

Answer 2

CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

.style1 {
  ...
  background-size: 100%;
}

आप केवल इसके साथ चौड़ाई या ऊँचाई निर्दिष्ट कर सकते हैं:

background-size: 100% 50%;

जो इसे 100% चौड़ाई और 50% ऊंचाई तक फैलाएगा।

---

ब्राउज़र समर्थन: http://caniuse.com/#feat=background-img-opts

Comments

वाह, जो मेरे लिए पूरी तरह से काम करता है - मैंने अन्य उत्तरों और विभिन्न तकनीकों की एक श्रृंखला की कोशिश की। लेकिन यह इतना सरल था और तुरंत काम किया।

— साभार

Answer 3

आप बैकग्राउंड इमेज (CSS 3 तक) स्ट्रेच नहीं कर सकते।

आपको पूर्ण स्थिति का उपयोग करना होगा, ताकि आप सेल के अंदर एक छवि टैग लगा सकें और इसे पूरे सेल को कवर करने के लिए खींच सकें, फिर सामग्री को छवि के ऊपर रख दें।

table {
  width: 230px;
}

.style1 {
  text-align: center;
  height: 35px;
}

.bg {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.bg .linkcontainer {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
}

<table cellpadding="0" cellspacing="0" border="10">
  <tr>
    <td class="style1">
      <div class="bg">
        <img src="http://placekitten.com/20/20" alt="" />
        <div class="linkcontainer">
          <a class="link" href="#">
            <span>Answer</span>
          </a>
        </div>
      </div>
    </td>
  </tr>
</table>

Comments

+1, सही। <img>एक <div>होने position: relative;और अधिकतम चौड़ाई / ऊंचाई के साथ लपेटना भी एक अच्छा विचार है । टीडी अपने आप में सभी ब्राउज़रों में सापेक्ष सापेक्ष नहीं है, यदि कोई हो।

— मद्र

मैं IE के लिए संघर्ष कर रहा था, उसके लिए +1

— अर्जुनसीसी

Answer 4

मुझे लगता है कि आप जो खोज रहे हैं वह है

.style1 {
  background: url('http://localhost/msite/images/12.PNG');
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

Comments

यह ठीक वैसा ही है जैसा मुझे चाहिए!

— राचेल उय

Answer 5

यह त्रुटिपूर्ण @ 2019 पर काम करता है

.marketing-panel  {
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

Answer 6

बस इसे अपने कोड ऑफ़ लाइन में पेस्ट करें:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />