সিএসএস ব্যাকগ্রাউন্ড চিত্রের জন্য কি কোনও srcset সমতুল্য রয়েছে?

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সমতুল্য সিএসএস বৈশিষ্ট্য। আমাদের অনুমানের সাথে সমতুল্য srcset কার্যকারিতা (তাদের মাত্রাগুলি অনুসারে সংস্থানসমূহ সংজ্ঞায়িত করা) যুক্ত করা উচিত।

বর্তমানে এটি কেবল সাফারি, ক্রোম এবং অপেরাতে -webkit-উপসর্গ সহ প্রয়োগ করা হয়েছে এবং এটি কেবল xবর্ণনাকারীদের সমর্থন করে ।

Question 3

খুব নিশ্চিত যে:

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

একইভাবে কাজ করে। ব্রাউজারটি চিত্রগুলি পরীক্ষা করবে, দেখতে কোনটি সবচেয়ে ভাল ফিট করে এবং এটি ব্যবহার করবে।

Question 4

আরেকটি পদ্ধতির, যা খোলামেলা আরও দৃust়, এটি হ'ল srcset বৈশিষ্ট্যের সাথে একটি চিত্রের সাথে পটভূমির চিত্রগুলির বৈশিষ্ট্য এবং বিকল্পগুলি মানিয়ে নেওয়া।

এটি করতে, চিত্রটিকে প্রস্থে সেট করুন: 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

পলিফিলের জন্য, আপনি সঠিক চিত্রের আকার ডাউনলোড করার জন্য একটি সিস্টেম হিসাবে এসসিআরসেট সহ ইমগ ব্যবহার করতে পারেন, তারপরে এটি লুকানোর জন্য জেএস ব্যবহার করুন এবং প্যারেন্ট উপাদানটির ব্যাকগ্রাউন্ড-চিত্র সেট করুন।

এখানে একটি মূর্খতা রয়েছে: http://jsbin.com/garetikubu/edit?html , আউটপুট

onloadএটিকে ব্লকিং স্ক্রিপ্ট হিসাবে জেএসের ব্যবহার এবং রাখার <head>বিষয়টি গুরুত্বপূর্ণ। আপনি যদি স্ক্রিপ্টটি পরে রাখেন (শেষে বলুন <body>), আপনি এমন একটি রেসের শর্ত পেতে পারেন যেখানে ব্রাউজারের মাধ্যমে এখনও img.currentSrc সেট করা হয়নি। এটি লোড হওয়ার জন্য অপেক্ষা করা ভাল।

উদাহরণটি আপনাকে আসল img ডাউনলোড হচ্ছে তা দেখার অনুমতি দেয়। আপনি কিছু সিএসএস দিয়ে সহজেই এটি লুকিয়ে রাখতে পারেন।

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

@ ওয়েস্টনের উত্তরের ভিত্তিতে , আমি আরও সাধারণ জিকুয়েরি সমাধান তৈরি করেছি, আপনি মূলত কেবল জেএস এবং সিএসএস অনুলিপি এবং পেস্ট করতে পারেন এবং এইচটিএমএল অংশে ফোকাস করতে পারেন;)

টিএল; ডিআর - ফিডাল: https://jsfiddle.net/dpaa7oz6/

সিএসএস

... লোড করার সময় চিত্রগুলি অবশ্যই দৃশ্যমান হবে তা নিশ্চিত করার জন্য

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

জেএস / জিকুয়েরি

এই স্ক্রিপ্টটি এমন সমস্ত চিত্রের মধ্য দিয়ে যাবে যার srcSetক্লাস এবং বাইন্ড loadইভেন্ট রয়েছে যা গ্রহণ করে currentSrc(বা srcসমর্থিত না হলে) এবং এটি ক্লাস background-imageসহ নিকটতম পিতামাতার কাছে সিএসএস হিসাবে রাখে bgFromSrcSet।

যে নিজেই যথেষ্ট হবে না! সুতরাং এটিwindow loadলোড ইভেন্টগুলি সম্পন্ন হয়েছে কিনা তাপরীক্ষা করার জন্যইভেন্টের মধ্যেএকটি বিরতিপরীক্ষাকারীরাখে, যদি তা না করে তবে এটি তাদের ট্রিগার করে। (img loadঘটনা খুব প্রায়ই আরম্ভ করা হয় শুধুমাত্র প্রথমবার লোড লোড নিম্নলিখিত উপর,, ইমেজ সোর্স ক্যাশে থেকে উদ্ধার করা হতে পারে, চিত্র লোড ঘটনা ফলে নয় বহিস্কার করা হচ্ছে! )

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 ! এটি কেবল imgডিওএম পিতামাতার গাছের উপাদানগুলিতে সেট করা যেতে পারে ।