Czy istnieje odpowiednik srcset dla obrazu tła css

Question

Czy istnieje odpowiednik srcset dla obrazu tła css

img z atrybutem srcset wygląda jak świetny sposób na tworzenie responsywnych obrazów. Czy istnieje równoważna składnia, która działa we właściwości css background-image?

HTML

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

CSS

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

56

html css background-image srcset

Author: Martin Algesten, 2014-11-07

Source

8 answers

Całkiem pewne, że:

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

Działa w ten sam sposób. Przeglądarka sprawdzi obrazy, zobaczy, który pasuje najlepiej i użyje tego.

17

Author: SRing,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-07 13:02:36

Dla polyfill, możesz użyć img z srcset jako mechanizm do pobierania poprawnego rozmiaru obrazu, a następnie użyć JS, aby go ukryć i ustawić obraz tła elementu nadrzędnego.

Oto skrzypce: http://jsbin.com/garetikubu/edit?html, output

Użycie onload i umieszczenie JS jako skryptu blokującego w <head> jest ważne. Jeśli umieścisz skrypt później (powiedzmy na końcu <body>), możesz uzyskać stan wyścigu, w którym img.currentSrc nie został jeszcze ustawiony przez przeglądarka. Najlepiej poczekać, aż zostanie załadowany.

Przykład pozwala zobaczyć pobrany oryginalny img. Możesz go łatwo ukryć za pomocą CSS.

6

Author: Weston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-03 17:03:57

Możesz używać zapytań o media do swojego celu. To takie proste:

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

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

I chyba działa na każdej przeglądarce, która obsługuje media queries;)

3

Author: gtamborero,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-24 09:07:17

Podobne rozwiązanie przy użyciu elementu <picture> : Tutorial tutaj

Przypadek tutoriala:

Wątpię, czy jeśli użyję tego samego obrazu dla mniejszego rozmiaru ekranu, główny temat mojego obrazu może stać się zbyt mały. Chcę aby wyświetlić inny obraz (bardziej skoncentrowany na głównym temacie) w inny rozmiar ekranu, ale nadal chcę wyświetlać oddzielne zasoby tego samego obrazu na podstawie stosunku urządzenia do pikseli i chcę dostosować wysokość i szerokość obraz oparty na viewport.

Przykładowy kod:

<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>

2

Author: Piotr Ścigała,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-17 19:50:27

Na podstawie @Weston's odpowiedź, zbudowałem bardziej ogólne rozwiązanie jQuery, można w zasadzie po prostu skopiować i wkleić JS i CSS i skupić się na części HTML;)

TL; DR-fiddle: https://jsfiddle.net/dpaa7oz6 /

CSS

...aby upewnić się, że obrazy będą prawie niewidoczne podczas ładowania

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

JS / jQuery

Ten skrypt przejrzy wszystkie obrazy, które mają srcSet class i bind load zdarzenie, które zajmuje currentSrc (lub src, Jeśli nie obsługiwane) i umieszcza go jako background-image CSS do najbliższego rodzica z klasą bgFromSrcSet.

to nie wystarczy! więc również umieszcza sprawdzanie interwałów na window load zdarzenie aby sprawdzić, czy zdarzenia load zostały zakończone, jeśli nie, uruchamia je. (img load event jest bardzo często wyzwalany tylko przy pierwszym ładowaniu , przy kolejnych ładowaniach źródło obrazu może być pobrane z pamięci podręcznej, w wyniku czego img Load event Nie jest zwolniony!)

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);  
  });

});

HTML

...może wyglądać tak:

<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>

Uwaga: Klasa bgFromSrcSet musi Nie być ustawiona na img! Można go ustawić tylko na elementy w drzewie nadrzędnym img DOM.

2

Author: jave.web,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-14 16:51:33

Innym podejściem, które jest szczerze mówiąc bardziej wytrzymałe, byłoby dostosowanie cech i opcji obrazów tła do obrazu z atrybutem srcset.

Aby to zrobić, ustaw obraz na width: 100%; height: 100%; oraz obiekt-fit: cover lub contain.

Oto przykład:

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

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

<img class="psuedo-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>

To może nie być najlepsze podejście dla wszystkich, ale wyobrażam sobie, że osiągnie najbardziej pożądane rezultaty bez żadnego obejścia javascript.

2

Author: Parks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-19 18:13:57

Jeśli używasz Foundation framework ( https://foundation.zurb.com/), możesz do tego użyć wtyczki Interchange:

<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

1

Author: Martti Hyvönen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-18 23:31:30

score 53 · Accepted Answer

image-set jest równoważną funkcją CSS. Powinniśmy dodać równoważną funkcjonalność srcset (definiowanie zasobów według ich wymiarów) do specyfikacji.

Obecnie jest zaimplementowany tylko w przeglądarkach Safari, Chrome i Opera z prefiksem -webkit- i obsługuje tylko deskryptory x.