क्या सीएसएस बैकग्राउंड छवि के लिए एक श्रुसेट समतुल्य है

Question 1

imgsrcsetविशेषता के साथ उत्तरदायी छवियों को करने का एक शानदार तरीका दिखता है। क्या कोई समान सिंटैक्स है जो सीएसएस background-imageसंपत्ति में काम करता है ?

एचटीएमएल

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

सीएसएस

.mycontainer {
    background: url(?something goes here?);
}

Question 2

image-setबराबर सीएसएस सुविधा है। हमें युक्ति के समतुल्य समरूप कार्यक्षमता (उनके आयामों के अनुसार संसाधनों को परिभाषित करना) को जोड़ना चाहिए।

वर्तमान में यह केवल -webkit-उपसर्ग के साथ सफारी, क्रोम और ओपेरा में लागू किया गया है , और यह केवल xवर्णनकर्ताओं का समर्थन करता है ।

Question 3

बहुत यकीन है कि:

background: -webkit-image-set( url('path/to/image') 1x, url('path/to/high-res-image') 2x );

उसी तरह काम करता है। ब्राउज़र छवियों की जांच करेगा, यह देखेगा कि कौन सबसे अच्छा बैठता है और उस एक का उपयोग करेगा।

Question 4

एक और दृष्टिकोण, जो काफी स्पष्ट रूप से अधिक मजबूत है, पृष्ठभूमि छवियों की विशेषताओं और विकल्पों को श्रीस्कूल विशेषता के साथ एक छवि के लिए अनुकूल बनाना होगा।

ऐसा करने के लिए, छवि को चौड़ाई निर्धारित करें: 100%; ऊंचाई: 100%; और ऑब्जेक्ट-फिट: कवर या होते हैं।

यहाँ एक उदाहरण है:

.pseudo-background-img-container {
  position: relative;
  width:400px;
  height: 200px;
}
.pseudo-background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="pseudo-background-img-container">

<img class="pseudo-background-img" src="https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg" srcset="https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep.jpg 640w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-280x175.jpg 280w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-432x270.jpg 432w, https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2016/12/Keep-216x135.jpg 216w" sizes="(max-width: 640px) 100vw, 640px">

</div>

स्निपेट का विस्तार करें

यह सभी के लिए सबसे अच्छा तरीका नहीं हो सकता है, लेकिन मुझे लगता है कि यह किसी भी जावास्क्रिप्ट वर्कअराउंड के बिना सबसे वांछित परिणाम प्राप्त करेगा।

Question 5

पॉलीफ़िल के लिए, आप सही छवि आकार डाउनलोड करने के लिए एक तंत्र के रूप में srcset के साथ एक img का उपयोग कर सकते हैं, फिर इसे छिपाने के लिए JS का उपयोग करें और मूल तत्व की पृष्ठभूमि-छवि सेट करें।

यहाँ एक पहेली है: http://jsbin.com/garetikubu/edit?html,output

onloadजेएस को एक अवरुद्ध स्क्रिप्ट के रूप में उपयोग करना और रखना <head>महत्वपूर्ण है। यदि आप बाद में स्क्रिप्ट डालते हैं (अंत में कहते हैं <body>), तो आप एक दौड़ की स्थिति प्राप्त कर सकते हैं जहां img.currentSrc ब्राउज़र द्वारा अभी तक सेट नहीं किया गया है। इसे लोड होने के लिए इंतजार करना सबसे अच्छा है।

उदाहरण आपको मूल img को डाउनलोड करने की अनुमति देता है। आप इसे कुछ CSS के साथ आसानी से छिपा सकते हैं।

Question 6

आप अपने उद्देश्यों के लिए मीडिया क्वेरी का उपयोग कर सकते हैं। यह आसान है:

.mycontainer {    
    background-image:url("img/image-big.jpg"); // big image   
}

@media(max-width: 768px){
   .mycontainer {
        background-image:url("img/image-sm.jpg"); // small image  
    }
}

और मुझे लगता है कि यह मीडिया के सवालों का समर्थन करने वाले हर ब्राउज़र पर काम करता है;)

Question 7

<picture>तत्व का उपयोग करते हुए समान समाधान : यहां ट्यूटोरियल

ट्यूटोरियल का मामला:

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

उदाहरण कोड:

<picture>

<source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x,
images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x">

<source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x,
images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x">

<img src="space-needle.jpg" alt="Space Needle">

</picture>

Question 8

यदि आप फाउंडेशन फ्रेमवर्क ( https://foundation.zurb.com/ ) का उपयोग कर रहे हैं , तो आप उसके लिए इंटरचेंज प्लगइन का उपयोग कर सकते हैं:

<div data-interchange="[assets/img/interchange/small.jpg, small], 
                       [assets/img/interchange/medium.jpg, medium], 
                       [assets/img/interchange/large.jpg, large]">
</div>

https://foundation.zurb.com/sites/docs/interchange.html#use-with-background-images

Question 9

@Weston के उत्तर के आधार पर , मैंने एक और सामान्य jQuery समाधान बनाया है, आप मूल रूप से JS और CSS को कॉपी और पेस्ट कर सकते हैं और HTML भाग पर ध्यान केंद्रित कर सकते हैं;)

टीएल; डीआर - फिडल: https://jsfiddle.net/dpaa7oz6/

सीएसएस

... छवियों को सुनिश्चित करने के लिए लोड करते समय शायद ही दिखाई देगा

.srcSet{
  position: fixed;
  z-index: 0;
  z-index: -1;
  z-index: -100;
  /* you could probably also add visibility: hidden; */
}

जेएस / jQuery

यह स्क्रिप्ट उन सभी छवियों से गुजरेगी, जिनमें srcSetक्लास और बाइंड loadइवेंट है, जो currentSrc(या srcयदि समर्थित नहीं है) और क्लास के background-imageसाथ निकटतम माता-पिता के लिए इसे सीएसएस के रूप में रखता है bgFromSrcSet।

इतना ही काफी नहीं होगा! इसलिए यहwindow loadइस बात के परीक्षण के लिएएक अंतराल परीक्षक भी रखता हैकि क्या लोड घटनाओं को पूरा किया गया है, यदि नहीं, तो यह उन्हें ट्रिगर करता है। (img loadईवेंट बहुत बार केवल पहली बार लोड पर ट्रिगर कियाजाता है, निम्न लोड पर, छवि स्रोत को कैश से पुनर्प्राप्त किया जा सकता है, जिसके परिणामस्वरूप img लोड ईवेंट को निकाल नहीं दिया जा सकता है! )

jQuery(function($){ //ON DOCUMENT READY
  var $window = $(window); //prepare window as jQuery object

  var $srcSets = $('.srcSet'); //get all images with srcSet clas
  $srcSets.each(function(){ //for each .srcSet do...
    var $currImg = $(this); //prepare current srcSet as jQuery object

    $currImg
      .load(function(){ //bind the load event
          var img = $currImg.get(0); //retrieve DOM element from $currImg

          //test currentSrc support, if not supported, use the old src
          var src = img.currentSrc ? img.currentSrc : img.src;

          //To the closest parent with bgFromSrcSet class,
          //set the final src as a background-image CSS
          $currImg.closest('.bgFromSrcSet').css('background-image', "url('"+src+"')");

          //remove processed image from the jQuery set
          //(to update $srcSets.length that is checked in the loadChecker)
          $srcSets = $srcSets.not($currImg);

          $currImg.remove(); //remove the <img ...> itself 
      })
    ;      

  });

  //window's load event is called even on following loads...
  $window.load(function(){    
    //prepare the checker
    var loadChecker = setInterval(function(){
        if( $srcSets.length > 0 ) //if there is still work to do...
            $srcSets.load(); //...do it!
        else
            clearInterval(loadChecker); //if there is nothing to do - stop the checker
    }, 150);  
  });

});

एचटीएमएल

... इस तरह देख सकते हैं:

<div class="bgFromSrcSet">
  <img class="srcSet"
       alt=""
       src="http://example.com/something.jpeg" 
       srcset="http://example.com/something.jpeg 5760w, http://example.com/something-300x200.jpeg 300w, http://example.com/something-768x512.jpeg 768w, http://example.com/something-1024x683.jpeg 1024w, http://example.com/something-1000x667.jpeg 1000w"
       sizes="(max-width: 2000px) 100vw, 2000px"
  >
  Something else...
</div>

नोट: वर्ग bgFromSrcSetको स्वयं सेट नहीं किया जाना चाहिए img! यह केवल imgDOM पैरेंट ट्री में तत्वों के लिए सेट किया जा सकता है ।