Existe-t-il un équivalent srcset pour l’image d’arrière-plan css

img avec l’atsortingbut srcset ressemble à un excellent moyen de faire des images réactives. Existe-t-il une syntaxe équivalente qui fonctionne dans background-image propriété css background-image ?

HTML

 yah 

CSS

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

image-set est la fonctionnalité CSS équivalente. Nous devrions append une fonctionnalité srcset équivalente (définissant les ressources en fonction de leurs dimensions) à la spécification.

Actuellement, il n’est implémenté que dans Safari, Chrome et Opera avec le préfixe -webkit- , et ne supporte que les descripteurs x .

Assez sûr que:

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

fonctionne de la même façon. Le navigateur examinera les images, verra laquelle convient le mieux et utilisera celle-ci.

Pour un polyfill, vous pouvez utiliser un img avec srcset comme mécanisme de téléchargement de la taille d’image correcte, puis utiliser JS pour le masquer et définir l’image d’arrière-plan d’un élément parent.

Voici un violon: http://jsbin.com/garetikubu/edit?html,output

L’utilisation de onload et le fait de placer le JS comme un script de blocage dans est important. Si vous placez le script plus tard (par exemple à la fin de ), vous pouvez obtenir une condition de concurrence où img.currentSrc n’a pas encore été défini par le navigateur. Il est préférable d’attendre qu’il soit chargé.

L’exemple vous permet de voir l’img original en cours de téléchargement. Vous pouvez facilement le cacher avec des CSS.

Vous pouvez utiliser les requêtes médias pour votre objective. C’est facile comme ça:

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

Et je pense que cela fonctionne sur tous les navigateurs qui supportent les requêtes média;)

Sur la base de la réponse de @Weston , j’ai construit une solution jQuery plus générale, vous pouvez simplement copier et coller le JS et le CSS et vous concentrer sur la partie HTML;)

TL; DR – violon: https://jsfiddle.net/dpaa7oz6/

CSS

… pour que les images soient peu visibles lors du chargement

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

JS / jQuery

Ce script parcourra toutes les images ayant srcSet classe srcSet et load événement bind bind qui prend currentSrc (ou src s’il n’est pas supporté) et le place en tant que CSS background-image au parent le plus proche avec la classe bgFromSrcSet .

Cela ne suffirait pas! Donc, il place également un vérificateur d’intervalle sur load événement de load window pour tester si les événements de chargement ont été terminés, sinon, il les déclenche. (L’événement de load img est très souvent déclenché uniquement lors du premier chargement , sur les chargements suivants, la source de l’image peut être récupérée du cache, ce qui fait que l’événement de chargement img n’est PAS déclenché! )

 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); //resortingeve 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  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

… pourrait ressembler à ceci:

 
Something else...

Remarque: la classe bgFromSrcSet ne doit pas être définie sur l’ img lui-même! Il ne peut être défini que pour les éléments de l’arbre parent img DOM.

Une autre approche, franchement plus robuste, consisterait à adapter les caractéristiques et les options des images de fond à une image avec l’atsortingbut srcset.

Pour ce faire, définissez l’image sur la largeur: 100%; hauteur: 100%; et ajustement d’object: couvrir ou contenir.

Voici un exemple:

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

Solution similaire en utilisant l’élément : Tutorial here

Le cas du tutoriel:

Je doute que si j’utilise la même image pour une taille d’écran plus petite, le sujet principal de mon image risque de devenir trop petit. Je souhaite afficher une image différente (plus ciblée sur le sujet principal) dans une taille d’écran différente, mais je souhaite quand même afficher des ressources distinctes de la même image en fonction du ratio pixel-appareil et je souhaite personnaliser la hauteur et la largeur de la image basée sur viewport.

Exemple de code:

    Space Needle  

Si vous utilisez le framework Foundation ( https://foundation.zurb.com/ ), vous pouvez utiliser le plug-in Interchange pour cela:

 

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