मैं IE में पृष्ठभूमि के आकार का काम कैसे करूं?

Question

क्या background-sizeIE में CSS स्टाइल का काम करने का कोई ज्ञात तरीका है ?

Comments

आप क्या प्रभाव पाने की कोशिश कर रहे हैं?

— ZippyV

@ZippV मेरे पास एक div है जो लगभग 250 पिक्सेल चौड़ी है। लेकिन पृष्ठभूमि छवि 300px चौड़ी है। मैं चाहता हूं कि पृष्ठभूमि की छवि पूरी तरह से फिट हो (पृष्ठभूमि-आकार: 100%) इसलिए यह कट ऑफ नहीं हो रहा है। फिर :hoverमैं चाहता हूँ कि ज़ूम का भ्रम पैदा करने के लिए पृष्ठभूमि का आकार पूरी तरह से 300px चौड़ाई (पृष्ठभूमि-आकार: ऑटो) में बदल जाए

— जेडी इसाक्स

आप एक img टैग का उपयोग करके उसी प्रभाव को प्राप्त कर सकते हैं। यदि आपको इसके शीर्ष पर कुछ भी चाहिए, तो z-index का उपयोग करें।

— ZippyV

@ जॉन ने स्वीकार किए गए उत्तर को बदलने पर विचार किया यदि डैन का समाधान आपके लिए काम करता है!

— पेक्का

@ZippyV IMG टैग में कभी-कभी अनावश्यक साइड-इफेक्ट्स होते हैं, उदाहरण के लिए इसे चुना या राइट क्लिक किया जा सकता है। ये कभी-कभी ठीक होते हैं, कभी-कभी नहीं।

— पीटर - मोनिका

Answer 1

थोड़ा देर से, लेकिन यह भी उपयोगी हो सकता है। IE 5.5+ के लिए एक IE फ़िल्टर है, जिसे आप लागू कर सकते हैं:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

हालांकि, यह पूरी छवि को आवंटित क्षेत्र में फिट होने के लिए मापता है, इसलिए यदि आप स्प्राइट का उपयोग कर रहे हैं, तो यह समस्या पैदा कर सकता है।

विशिष्टता: AlphaImageLoader फ़िल्टर @microsoft

Comments

मुझे आश्चर्य है कि एमएस ने सीएसएस का उपयोग करके उस कार्य-क्षमता को लागू क्यों नहीं किया। आपका बहुत बहुत धन्यवाद!

— मार्टिन एंडरसन

कौन से IE संस्करण कृपया इसका समर्थन करते हैं?

— ᆼ

यदि आप उस तत्व के अंदर लिंक और बटन का उपयोग कर रहे हैं जिसे हमने परिभाषित किया है, तो वे लिंक और बटन काम नहीं करेंगे। क्या कोई इसे ठीक करने की विधि जानता है?

— रद्दीप्रिंस

मुझे position: relative; z-index: 999ऐसे divs के अंदर इनपुट, a, बटन के लिए जोड़ना था

— rubyprince

पैमाने की विधि हालांकि अनुपात नहीं रखती है .. इसलिए यह सबसे अच्छा है कि आपके तत्व में आपकी छवि के समान अनुपात है।

— यवेस वान ब्रोकेवन

Answer 2

मैंने jquery.backgroundSize.js बनाया : एक 1.5K jquery प्लगइन जिसे "कवर" और "समाहित" मान के लिए IE8 फ़ॉलबैक के रूप में उपयोग किया जा सकता है। डेमो पर एक नजर है ।

Comments

Jquery.backgroundSize.js के दस्तावेज़ के अनुसार, प्लगइन को हटा दिया गया है, और वे इसके बजाय पृष्ठभूमि के आकार- पॉलीफ़िल की सलाह देते हैं ।

— VOIDHand

अद्यतन संस्करण के साथ काम नहीं करता है background-position: fixed।

— रयान बर्नी

@VOIDHand फ़िल्टर और पॉलीफ़िल दोनों मेरे लिए काम नहीं करते थे, मैंने सफलता के लिए jquery.backgroundSize का उपयोग किया

— क्रिस मैरिसिक

Answer 3

इस पोस्ट के लिए, क्रॉस ब्राउज़र खुशी के लिए मेरी पूरी सीएसएस है:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

जब से मैंने इस कोड के टुकड़े पर काम किया है तब से यह बहुत लंबा है, लेकिन मैं और अधिक ब्राउज़र संगतता के लिए जोड़ना चाहूंगा, मैंने इसे अपने सीएसएस में अन्य ब्राउज़र संगतता के लिए जोड़ा है:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Comments

@ Gaurav123 कोशिश-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

— honk31

इससे बैकग्राउंड इमेज को दो बार प्रदर्शित करने के लिए मेरा आईई 8 बनता है - एक स्केल किए गए आयामों के साथ और दूसरा बड़े आकार के बैकग्राउंड वाला।

— arekk

ie7: ठीक लग रहा है, लेकिन अब लिंक पर क्लिक नहीं कर सकते। (Why7? Govt साइट्स अपडेट करने के लिए बहुत धीमी गति से)

— रोबी मैथ्यू

Answer 4

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

Backstretch-plugin का उल्लेख SO पर यहाँ किया गया था । jQuery-backstretch-plugin-site यहाँ है ।

इसी तरह के फैशन में आप एक jQuery- प्लगइन या स्क्रिप्ट बना सकते हैं जो आपकी स्थिति में पृष्ठभूमि-आकार का काम करता है (पृष्ठभूमि-आकार: 100%) और IE8- में। तो आपके प्रश्न का उत्तर देने के लिए: हाँ एक तरीका है, लेकिन इसमें कोई प्लग-एंड-प्ले समाधान नहीं है (यानी आपको कुछ कोडिंग खुद करनी होगी)।

(अस्वीकरण: मैंने बैकस्ट्रीट-प्लगइन की अच्छी तरह से जांच नहीं की, लेकिन यह पृष्ठभूमि-आकार: कवर के समान ही लगता है)

Answer 5

इसके लिए एक अच्छा पॉलीफ़िल है: लूइस्मेरी / पृष्ठभूमि-आकार-पॉलीफ़िल

प्रलेखन उद्धृत करने के लिए:

अपनी वेबसाइट पर backgroundize.min.htc अपलोड करें। .htaccess के साथ जो IE द्वारा आवश्यक माइम-प्रकार भेजेगा (केवल Apache - यह nginx, नोड और IIS में बनाया गया है)।

हर जगह जब आप अपने CSS में बैकग्राउंड-साइज़ का उपयोग करते हैं, तो इस फाइल का संदर्भ जोड़ें।

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Comments

यह पॉलीफिल बस काम करता है। पृष्ठभूमि के आकार: कवर या IE8 में होते हैं। कोई उपद्रव कोई अव्यवस्था नहीं।

— जीमलांगो

यह दृष्टिकोण containऔर दोनों का समर्थन करता है cover। इसमें 5.7KB बहुत खराब नहीं है क्योंकि यह एक नेटवर्क पैकेट में स्थानांतरित हो जाएगा।

— SMMousavi

Answer 6

IE11 विंडोज 7 में यह मेरे लिए काम करता है,

background-size: 100% 100%;

Answer 7

आप IE8 के लिए इस फ़ाइल ( https://github.com/louisremi/background-size-polyfill "बैकग्राउंड-साइज़ पॉलीफ़िल") का उपयोग कर सकते हैं जो वास्तव में उपयोग करने के लिए सरल है:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

Answer 8

मैंने निम्नलिखित स्क्रिप्ट के साथ प्रयास किया -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

यह मेरे लिए काम किया!

Comments

किस संस्करण के लिए?

— 20