सीएसएस पृष्ठभूमि छवि को फिट करने के लिए चौड़ाई, ऊंचाई अनुपात में ऑटो-स्केल होना चाहिए

Question

मेरे पास है

body {
    background: url(images/background.svg);
}

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

फिलहाल, फ़ायरफ़ॉक्स ऐसा लगता है कि यह ऊंचाई को फिट बना रहा है और फिर चौड़ाई को समायोजित कर रहा है। क्या यह शायद इसलिए है क्योंकि ऊंचाई सबसे लंबा आयाम है और यह फसल से बचने की कोशिश कर रहा है? मैं खड़ी फसल करना चाहता हूं , फिर स्क्रॉल करें: कोई क्षैतिज दोहराव नहीं।

इसके अलावा, क्रोम छवि को केंद्र में रख रहा है, कोई रिपीट नहीं, यहां तक ​​कि जब background-repeat:repeatस्पष्ट रूप से दिया जाता है, जो कि वैसे भी डिफ़ॉल्ट है।

Comments

html, body { height: 100%; }मदद करता है? इसके अलावा, खांसी ।

— तीस

यह क्रोम google पर काम नहीं करता है

— simon

Answer 1

इसके लिए एक CSS3 संपत्ति है, जिसका नाम है background-size( संगतता जांच )। जबकि कोई लंबाई मान सेट कर सकता है, इसका उपयोग आमतौर पर विशेष मूल्यों containऔर के साथ किया जाता है cover। आपके विशिष्ट मामले में, आपको उपयोग करना चाहिए cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

के लिए Eggsplanation containऔरcover

बुरी सजा के लिए खेद है, लेकिन मैं प्रदर्शन के लिए बिस्वरुप गांगुली द्वारा दिन की तस्वीर का उपयोग करने जा रहा हूं । आओ हम कहते हैं कि यह आपकी स्क्रीन है, और ग्रे क्षेत्र आपकी दृश्यमान स्क्रीन के बाहर है। प्रदर्शन के लिए, मैं 16x9 अनुपात मानूंगा।

हम पृष्ठभूमि के रूप में दिन के उपरोक्त चित्र का उपयोग करना चाहते हैं। हालाँकि, हमने किसी कारण से छवि को 4x3 पर क्रॉप कर दिया। हम background-sizeसंपत्ति को कुछ निश्चित लंबाई में सेट कर सकते हैं, लेकिन हम containऔर पर ध्यान केंद्रित करेंगे cover। ध्यान दें कि मैं यह भी मानता हूं कि हमने चौड़ाई और / या की ऊँचाई को कम नहीं किया है body।

contain

contain

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

यह सुनिश्चित करता है कि पृष्ठभूमि की छवि हमेशा पृष्ठभूमि स्थिति क्षेत्र में पूरी तरह से निहित है, हालांकि, background-colorइस मामले में आपके साथ कुछ खाली जगह भरी जा सकती है :

cover

cover

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

यह सुनिश्चित करता है कि पृष्ठभूमि छवि सब कुछ कवर कर रही है। कोई दृश्य नहीं होगा background-color, हालांकि स्क्रीन के अनुपात के आधार पर आपकी छवि का एक बड़ा हिस्सा कट सकता है:

वास्तविक कोड के साथ प्रदर्शन

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Comments

यह वही है जो मैं चाहता हूं, धन्यवाद। यह क्रोम (या क्रोमियम, कम से कम) में काम नहीं करता है - कोई उज्ज्वल विचार मिला है?

— 12:00

Quirksmode.org/css/contents.html#t44 के अनुसार इसे क्रोम में बिना किसी उपसर्ग के काम करना चाहिए। हालाँकि, क्या आपने -webkit-उपसर्ग की कोशिश की है ?

— जेटा

योहान का जवाब (इस पृष्ठ के निचले भाग में) वास्तव में मैं क्या देख रहा था:background-size: contain

— डैनी बेकेट

@ डैनीबेकेट: जबकि यह संभव है, यह वह नहीं है जो ओपी देख रहा

— ज़ेटा

containज़ूम फिट की तरह है। coverज़ूम फिल की तरह है। containचौड़ाई और ऊंचाई के बीच बड़े आयाम से मेल खाने के लिए छवि का आकार समायोजित करता है। coverचौड़ाई और ऊंचाई के बीच छोटे आयाम से मेल करने के लिए छवि का आकार समायोजित करता है।

— अहानबेस्कैड

Answer 2

Https://developer.mozilla.org/en-US/docs/CSS/background-size के सुझावों के आधार पर मैं निम्नलिखित नुस्खा के साथ समाप्त होता हूं जो मेरे लिए काम करता है

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Comments

हालांकि मैंने इस्तेमाल किया background-position: center;, यह मेरे लिए बेहतर काम किया backgound-size: cover;।

— नैट

क्या मुझे पता है कि हमें overflow-y: hiddenभाग की आवश्यकता क्यों है ?

— नाम जी वीयू

Answer 3

मुझे यकीन नहीं है कि आप वास्तव में क्या देख रहे हैं, लेकिन आपको वास्तव में CSS-Tricks से क्रिस कॉयर द्वारा लिखित इन उत्कृष्ट ब्लॉग पोस्टों की जांच करनी चाहिए:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

प्रत्येक लेख के लिए विवरण पढ़ें और देखें कि क्या वे आपके लिए देख रहे हैं।

निम्नलिखित प्रश्न का पहला उत्तर:

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

दूसरी पोस्ट का लक्ष्य निम्नलिखित को प्राप्त करना है, "एक वेबसाइट पर पृष्ठभूमि की छवि जो हर समय पूरी ब्राउज़र विंडो को कवर करती है।"

उम्मीद है की यह मदद करेगा।

Answer 4

बैकग्राउंड इमेज सेट परफेक्ट नहीं है तो उसका सीएसएस समस्या है, इसलिए उसके सीएसएस फ़ाइल को नीचे कोड में बदल दें

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; पृष्ठभूमि का आकार: 100% 100% ;;

Answer 5

इसे इस्तेमाल करे,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Answer 6

बस इसे एक पंक्ति में जोड़ें:

    .your-class {
        height: 100vh;
    }

vh व्यूपोर्ट ऊंचाई है। यह स्वचालित रूप से डिवाइस की ब्राउज़र विंडो को फिट करने का पैमाना होगा।

यहां और अधिक जांचें: ब्राउज़र विंडो की 100% ऊंचाई बनाएं

Answer 7

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Comments

वर्णन करें कि वास्तव में समस्या क्या है और आप इसे कैसे हल करते हैं, कृपया स्पष्टीकरण के बिना यहां कोड का एक गुच्छा पेस्ट न करें।

— सियावश

Answer 8

मेरे पास एक ही मुद्दा था, ब्राउज़र आयामों को समायोजित करते समय छवि का आकार बदलने में असमर्थ।

खराब कोड:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

अच्छा कोड:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

यहां कुंजी इस तत्व का जोड़ है -> पृष्ठभूमि-आकार: समाहित;

Answer 9

यहाँ मेरे लिए क्या काम किया गया है:

background-size: auto 100%;

Answer 10

पृष्ठभूमि का आकार निर्धारित करने से मदद नहीं मिलती है, निम्न समाधान ने मेरे लिए काम किया:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

यह मूल रूप से छवि को क्रॉप करता है और इसे फिट बनाता है, फिर background-size: contain/coverभी इसे फिट नहीं बनाया।