¿Hay un equivalente de configuración para la imagen de fondo CSS?

img con el atributo srcset parece una excelente manera de hacer imágenes receptivas. ¿Hay una syntax equivalente que funcione en la propiedad css background-image ?

HTML

 yah 

CSS

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

image-set es la característica CSS equivalente. Deberíamos agregar funcionalidad equivalente de srcset (definiendo los recursos de acuerdo con sus dimensiones) a la especificación.

Actualmente solo está implementado en Safari, Chrome y Opera con el prefijo -webkit- y solo es compatible con los descriptores x .

Bastante seguro de que:

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

funciona de la misma manera. El navegador examinará las imágenes, verá cuál se adapta mejor y usará esa.

Para un relleno múltiple, puede usar un img con srcset como mecanismo para descargar el tamaño de imagen correcto, luego use JS para ocultarlo y establecer la imagen de fondo de un elemento principal.

Aquí hay un violín: http://jsbin.com/garetikubu/edit?html,output

El uso de onload y poner JS como un script de locking en es importante. Si coloca la secuencia de comandos más tarde (por ejemplo, al final de ), puede obtener una condición de carrera donde img.currentSrc aún no ha sido configurado por el navegador. Lo mejor es esperar a que se cargue.

El ejemplo te permite ver la img original que se está descargando. Puedes ocultarlo fácilmente con un poco de CSS.

Puede usar consultas de medios para su propósito. Es fácil como esto:

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

Y creo que funciona en todos los navegadores que admiten consultas de medios;)

Basado en la respuesta de @Weston , construí una solución jQuery más general, básicamente puedes copiar y pegar el JS y CSS y enfocarte en la parte HTML;)

TL; DR – violín: https://jsfiddle.net/dpaa7oz6/

CSS

… para garantizar que las imágenes apenas sean visibles durante la carga

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

JS / jQuery

Este script pasará por todas las imágenes que tengan la clase srcSet y load evento de load bind que tome currentSrc (o src si no se admite) y lo coloca como un CSS de background-image en el elemento primario más cercano con la clase bgFromSrcSet .

¡Eso en sí mismo no sería suficiente! Por lo tanto, también pone un verificador de intervalo en load evento de load window para probar si los eventos de carga se han completado, si no, los desencadena. (El evento de load img generalmente se activa solo en la primera carga , en las siguientes cargas, el origen de la imagen podría recuperarse de la memoria caché, lo que provocaría que el evento de carga IMG NO se activara ).

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

… podría verse así:

 
Something else...

Nota: ¡la clase bgFromSrcSet no se debe establecer en el img mismo! Solo se puede establecer a los elementos en el árbol padre de img DOM.

Otro enfoque, que es francamente más sólido, sería adaptar las características y opciones de las imágenes de fondo a una imagen con el atributo srcset.

Para hacer esto, configure la imagen para que sea de ancho: 100%; altura: 100%; y ajuste de objeto: cubrir o contener.

Aquí hay un ejemplo:

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

Solución similar usando el elemento : Tutorial aquí

Caso del tutorial:

Dudo que si uso la misma imagen para un tamaño de pantalla más pequeño, el tema principal de mi imagen se vuelva demasiado pequeño. Quiero mostrar una imagen diferente (más centrada en el tema principal) en un tamaño de pantalla diferente, pero aún quiero mostrar activos separados de la misma imagen en función de la relación dispositivo-píxel, y quiero personalizar la altura y el ancho de la pantalla. imagen basada en la ventana gráfica.

Código de ejemplo:

    Space Needle  

Si está utilizando Foundation framework ( https://foundation.zurb.com/ ), puede usar el complemento Interchange para eso:

 

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