खिंचाव और सीएसएस पृष्ठभूमि पैमाने

Question

क्या सीएसएस में एक पृष्ठभूमि प्राप्त करने का एक तरीका है अपने कंटेनर को फैलाने या स्केल करने के लिए?

Answer 1

आधुनिक ब्राउज़रों के लिए, आप इसका उपयोग करके पूरा कर सकते हैं background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover इसका मतलब है कि छवि को लंबवत या क्षैतिज रूप से खींचना ताकि यह कभी भी टाइल / दोहराता न हो।

यह सफारी 3 (या बाद में), क्रोम, ओपेरा 10+, फ़ायरफ़ॉक्स 3.6+ और इंटरनेट एक्सप्लोरर 9 (या बाद में) के लिए काम करेगा।

इसके लिए इंटरनेट एक्सप्लोरर के निम्न क्रियाओं के साथ काम करने के लिए, इन सीएसएस को आज़माएँ:

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

Comments

क्लेमेंट के लिए: आप पिछले IE के लिए फ़िल्टर के लिए क्या सुझाव देते हैं: केवल आंशिक रूप से काम करते हैं। यह चित्र की चौड़ाई को ठीक करता है, लेकिन ऊंचाई स्केलिंग किसी भी चीज तक सीमित नहीं होने से गलत हो जाती है। पृष्ठ जितना ऊंचा है, पृष्ठभूमि चित्र है .. = (मैंने IE8 पर यह कोशिश की है। और यह भी, क्या यह संभव है कि इन 'कवर' कमांड का उपयोग करें और किसी तरह इस तरह के मोबाइल फोन के साथ संगत करें? मुझे पता है कि व्यूपोर्ट है? समस्या है, लेकिन यह एक तरह से पूरे स्क्रीन पर व्यूपोर्ट को स्केल करने के लिए कब्ज़ा कर सकता है कि पृष्ठभूमि यहाँ पर स्केल की गई है ?? प्रतिक्रियाओं के लिए धन्यवाद!

IE- विशिष्ट फ़िल्टर आदर्श समाधान नहीं हैं इसलिए IE के लिए सीएसएस विकल्पों के साथ स्थिति के लिए स्वतंत्र महसूस करें। मैं व्यक्तिगत रूप से अपनी साइट पर CSS3 "कवर" का उपयोग करता हूं और यह iOS उपकरणों पर ठीक काम करता है, बस डिवाइस-चौड़ाई को परिभाषित करना सुनिश्चित करें।

— क्लेमेंट

कवर doesn `t बीजी खिंचाव। 100% 100% हाँ।

— neoswf

इस समाधान ने मेरे लिए सबसे अच्छा काम किया जहां मैं वास्तविक संकल्प से अधिक या तो क्षैतिज या लंबवत रूप से छवि को खींचना नहीं चाहता था। धन्यवाद..!!

— श्री नोड्डी

NB: क्रोमियम 78.0.3904.97 के रूप में, प्रत्येक अक्ष के साथ स्वतंत्र रूप से svg छवियों को स्केल करना संभव नहीं है। आपको इसे स्केल करना होगा और इसे रैस्टर इमेज में बदलना होगा।

— माइक

Answer 2

CSS 3 गुण का उपयोग करें background-size:

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

यह 2012 से आधुनिक ब्राउज़रों के लिए उपलब्ध है।

Comments

छवि के पहलू अनुपात को संरक्षित करने के लिए आपको "पृष्ठभूमि-आकार: आवरण;" का उपयोग करना चाहिए या "पृष्ठभूमि-आकार: सम्‍मिलित है;"। मैंने एक पॉलीफ़िल बनाया है जो IE8 में उन मूल्यों को लागू करता है: github.com/louisremi/background-size-polyfill

— Louis-Rémi

मुझे पता है कि यह एक साल पुराना है, लेकिन मुझे 'सभ्य ब्राउज़रों' के साथ (हंसते हुए) सहमत होना है। अपने सभी ब्राउज़रों की जाँच करें, लेकिन मेरे पास IE से अधिक समस्याएँ हैं उनमें से किसी से भी।

— एरोकम

मुझे background-size: 100% 100%;इच्छित प्रभाव प्राप्त करने के लिए सेट करना था, अगर वह किसी और की मदद करता।

— गुमान २ gu

की व्याख्या coverऔर contain MDN पर

— mohas

यह वास्तव में काम नहीं करता है। प्रश्न कंटेनर को भरने का है जिसका मतलब है कि हम इसे फैलाना चाहते हैं ताकि यह दोहराए नहीं। दूसरी ओर यह उत्तर ऊंचाई की दिशा में दोहराएगा यदि ऊंचाई क्षेत्र को कवर नहीं करती है। "भरने के लिए खिंचाव" का अर्थ है खिंचाव लेकिन फिर भी आपको इसे दोहराना नहीं है। सही उत्तर नीचे से "कवर" है। यह वास्तव में इस मामले को संभालता है कि यह नहीं करता है

— gman

Answer 3

CSS के साथ एक छवि स्केल करना बहुत संभव नहीं है, लेकिन एक समान प्रभाव निम्नलिखित तरीके से प्राप्त किया जा सकता है, हालांकि।

इस मार्कअप का उपयोग करें:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

निम्नलिखित सीएसएस के साथ:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

और आपको किया जाना चाहिए!

छवि को "पूर्ण रूप से विकसित" करने और पहलू अनुपात को बनाए रखने के लिए, आप इसके बजाय ऐसा कर सकते हैं:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

यह काफी अच्छी तरह से काम करता है! यदि एक आयाम को क्रॉप किया जाता है, हालांकि, यह छवि के केवल एक तरफ ही क्रॉप किया जाएगा, बजाय दोनों किनारों (और केंद्रित) पर समान रूप से क्रॉप किया जाएगा। मैंने इसे फ़ायरफ़ॉक्स, वेबकिट और इंटरनेट एक्सप्लोरर 8 में परीक्षण किया है ।

Comments

यह अच्छी तरह से काम करता है ... लेकिन कुछ और अधिक मजबूत (शायद जावास्क्रिप्ट के साथ) की तलाश में था, जो इसे भी केंद्रित करता था और अगर चित्र परिदृश्य या चित्र के आधार पर समायोजित किया गया था। अगर किसी के पास उस घूंघट में कोई हल है तो एक लिंक पसंद आएगा ... धन्यवाद!

— ब्रायन आर्मस्ट्रांग

मामले में किसी और को दिलचस्पी है, यह अच्छी तरह से काम करने के लिए लग रहा था: buildinternet.com/project/supersized

— ब्रायन आर्मस्ट्रांग

क्षैतिज केंद्रित साथ किया जा सकता margin: 0 autoपर .stretch। केवल widthया सेट करने से height, पहलू अनुपात समान रहता है। ज़ूम-फैक्टर का उपयोग करने max-widthऔर max-heightसीमित करने का प्रयास करें ...

— रोनाल्ड

यह मेरे लिए ie8 / ie9 में काम नहीं करता है, लेकिन ie6 / ie7 में काम करता है (और निश्चित रूप से अन्य सभी ब्राउज़र)। Ie8 / ie9 में, छवि केवल div के लगभग 3/4 को दिखाती है। किसी को भी एक ही मुद्दा है?

SO के साथ एक दोष: उन उत्तरों को चिह्नित करने का कोई तरीका नहीं है जो अब सही नहीं हैं, जिससे @Ullas जैसे लोगों को भटकना पड़ रहा है। सभी आधुनिक ब्राउज़रों में पृष्ठभूमि को स्केल करना आसान है। developer.mozilla.org/en/CSS/background-size

— ग्लेन मेनार्ड

Answer 4

CSS3 में पृष्ठभूमि के आकार की विशेषता का उपयोग करें :

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr बैकग्राउंड-साइज़ सपोर्ट का पता लगाने का समर्थन करता है । आप काम करने के लिए लिखे गए जावास्क्रिप्ट वर्कअराउंड का उपयोग कर सकते हैं, हालांकि आपको इसकी आवश्यकता है और जब कोई समर्थन नहीं होता है तो इसे गतिशील रूप से लोड करें। यह कुछ ब्राउज़रों के लिए घुसपैठ सीएसएस हैक का सहारा लेने के बिना कोड को बनाए रखेगा।

व्यक्तिगत रूप से मैं jQuery का उपयोग कर, इसके imgsizer के एक अनुकूलन के साथ एक स्क्रिप्ट का उपयोग करने के लिए । अधिकांश डिज़ाइनों के अनुसार, मैं अब उपकरणों में द्रव लेआउट के लिए चौड़ाई% का उपयोग करता हूं, एक छोरों में से एक के लिए थोड़ा सा अनुकूलन है (आकार के लिए लेखांकन जो हमेशा 100% नहीं होते हैं):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

संपादित करें: आप jQuery CSS3 Finaliz [s] ई में भी रुचि हो सकती है ।

Comments

बस जोर देने के लिए, Modernizr उन ब्राउज़रों में पृष्ठभूमि-आकार के लिए समर्थन सक्षम नहीं करता है जो मूल रूप से इसका समर्थन नहीं करते हैं। इसके लिए बस एक सुविधाजनक क्रॉस-ब्राउज़र परीक्षण है। यह आपके ऊपर है कि जब परीक्षा झूठी आए तो उसे नकली कर दें।

— क्रिस मोशिनि

Answer 5

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

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Comments

धन्यवाद! यह "बैकग्राउंड-साइज़: कवर" से अलग है

— पावेल व्लासोव

यह मेरे लिए iPad पर फैला है, लेकिन पैमाने पर नहीं। पोस्टिंग के लिए thx।

— डॉन कोटे

यह पृष्ठभूमि को छोटा करने के लिए बहुत अच्छा है। धन्यवाद!

— beingalex

यदि पृष्ठभूमि छवि एक एसवीजी है, तो preserveAspectRatio="none"एसवीजी के भीतर निर्दिष्ट करना भी आवश्यक है । इसके बारे में अधिक जानकारी यहाँ । यहां डेमो करें ।

— मेंटलिस्ट

आप पृष्ठभूमि-आकार का उपयोग कर सकते हैं: कवर; पृष्ठभूमि-लगाव: निश्चित; आप इसे स्केल कर सकते हैं

— सिराज अहमद

Answer 6

फिलहाल नहीं। यह CSS 3 में उपलब्ध होगा , लेकिन अधिकांश ब्राउज़र में इसे लागू होने तक कुछ समय लगेगा।

Comments

एक सूची में उपलब्ध महान लेख इसके अलावा: उस पृष्ठभूमि को सुपरसाइज़ करें, कृपया!

— jensgram

-1 मुझे नहीं लगता कि यह जवाब बहुत प्रासंगिक है ... और यह किसी भी तरह का समाधान पेश नहीं करता है ।

— पर्ट्का

@Potherca यह उत्तर उस समय (लगभग 3 साल पहले) सही था।

— एरान गैल्परिन

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

— एरन गैल्परिन

नहीं, मैंने इसे एक पर उठाया क्योंकि यह कहता है कि "कंप्यूटर कहता है कि नहीं" भले ही 2008 में वापस इस समस्या के कई समाधान हैं; ;-)

— पर्ट्का

Answer 7

.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 गैर-विक्रेता उपसर्ग संस्करण का समर्थन करता है)

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

    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

यह कैसे बेहतर या "पृष्ठभूमि-आकार: कवर" से अलग है?

— PKHunter

@PKHunter, मुझे यकीन नहीं है कि आप क्या कर रहे हैं। यह background-size: coverब्राउज़र उपसर्ग और एक IE समाधान को छोड़कर उपयोग कर रहा है

— Blowsie

Answer 8

एक शब्द में: नहीं। एक छवि को फैलाने का एकमात्र तरीका है<img> टैग के । आपको रचनात्मक होना पड़ेगा।

यह 2008 में सही था, जब उत्तर लिखा गया था। आज आधुनिक ब्राउज़र समर्थन करते हैं background-sizeजो इस समस्या को हल करता है। खबर है कि IE8 इसे समर्थन नहीं करता है।

Comments

@ बलोसी - प्यारा। उत्तर तिथि जांचें। ब्राउज़र परिदृश्य पिछले 5 वर्षों में थोड़ा बदल गया है।

— विल्क्स-

Answer 9

परिभाषित "खिंचाव और पैमाने" ...

यदि आपको एक बिटमैप प्रारूप मिला है, तो इसे खींचने और इसके बारे में खींचने के लिए आम तौर पर यह महान नहीं है (ग्राफिक रूप से बोलना)। उसी प्रभाव का भ्रम देने के लिए आप दोहराए जाने वाले पैटर्न का उपयोग कर सकते हैं। उदाहरण के लिए, यदि आपके पास एक ढाल है जो पृष्ठ के नीचे की ओर हल्का हो जाता है, तो आप एक ऐसे ग्राफिक का उपयोग करेंगे जो एक एकल पिक्सेल चौड़ा हो और आपके कंटेनर के समान ऊंचाई हो (या स्केलिंग के लिए खाते में अधिमानतः बड़ा हो) और फिर इसे भर में टाइल करें पृष्ठ। इसी तरह, यदि ढाल पूरे पृष्ठ पर चलता है, तो यह आपके कंटेनर से एक पिक्सेल ऊंचा और चौड़ा होगा और पृष्ठ को नीचे दोहराया जाएगा।

कंटेनर को भरने या सिकुड़ने पर कंटेनर को भरने के लिए आम तौर पर इसका भ्रम देने के लिए, आप छवि को कंटेनर से बड़ा बनाते हैं। किसी भी ओवरलैप को कंटेनर की सीमा के बाहर प्रदर्शित नहीं किया जाएगा।

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

के रूप में वास्तव में छवि को कम करने और कंटेनर के साथ बढ़ने के लिए, आपको छवि को पृष्ठभूमि के रूप में कार्य करने के लिए कुछ लेयरिंग ट्रिक्स का उपयोग करना होगा और इसे कंटेनर के साथ आकार देने के लिए कुछ जावास्क्रिप्ट। CSS के साथ ऐसा करने का कोई वर्तमान तरीका नहीं है ...

यदि आप वेक्टर ग्राफिक्स का उपयोग कर रहे हैं, तो आप मेरी विशेषज्ञता के दायरे से बाहर हैं, मुझे डर है।

Comments

स्ट्रेच = एक्स और वाई आयामों को स्वतंत्र रूप से छवि के पहलू राशन को बदलना, स्केल = चेंज एक्स और वाई आयामों को छवि के पहलू अनुपात को बनाए रखना।

— लॉरेंस डॉल

@SoftwareMonkey: एक पृष्ठभूमि के रूप में तब, आप सीधे सीएसएस में शर्तों के सही अर्थों में खिंचाव और पैमाने को नहीं बदल सकते। आपको भ्रम पैदा करने के लिए विभिन्न सीएसएस ट्रिक्स का उपयोग करना होगा कि यह वही है जो मैंने वर्णित किया है।

— बेनालास्टर

Answer 10

यह वही है जो मैंने इसे बनाया है। खिंचाव वर्ग में, मैंने बस ऊँचाई को बदल दिया auto। इस तरह से आपके बैकग्राउंड पिक्चर को हमेशा स्क्रीन की चौड़ाई और ऊंचाई के बराबर आकार मिलेगा।

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Answer 11

एक background-attachmentपंक्ति जोड़ें :

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

Answer 12

मैं बताना चाहूंगा कि यह करने के बराबर है:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Answer 13

इसके लिए एक और बढ़िया उपाय है, सर्बिन का बैकस्ट्रैच जो पेज पर शरीर या किसी भी तत्व पर लगाया जा सकता है - http://srobbin.com/jquery-plugins/backstretch/

Comments

निक, हम आम तौर पर पूछते हैं कि आप अपने उत्तर में मुख्य भाग प्रदान करते हैं, और केवल आगे के विवरण के लिए एक बाहरी लिंक की आपूर्ति करते हैं - इससे लिंक-सड़ने की स्थिति में उत्तर उपयोगी बने रहने में मदद मिलती है।

— लॉरेंस Dol

मेरी गलती। सामान्यतया, आप अपने दस्तावेज़ के <head> में backstretch को जोड़ते हैं, फिर इस तरह से आरंभ करते हैं: $ (("। आपका तत्व")। backstretch ("पथ / to / image.jpg");

— 14

Answer 14

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

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Answer 15

सॉलिडस्माइल के धोखा के लिए एक अतिरिक्त टिप एक चौड़ाई निर्धारित करके और ऊंचाई के लिए ऑटो का उपयोग करके स्केल (आनुपातिक पुन: आकार देने) है।

उदाहरण के लिए:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

Answer 16

border-image : yourimageअपनी छवि सेट करने के लिए संपत्ति का उपयोग करें और इसे अपनी स्क्रीन या विंडो की संपूर्ण सीमा तक मापें।