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

imagen de fondo html

Question

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

HTML

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

CSS

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

Answer 1

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

... podría verse así:

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

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.

Answer 2

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.

Answer 3

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

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

Puede que este no sea el mejor enfoque para todos, pero imagino que obtendrá la mayoría de los resultados deseados sin ninguna solución de javascript.

Answer 4

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 bloqueo en <head> es importante. Si coloca la secuencia de comandos más tarde (por ejemplo, al final de <body> ), 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.

Answer 5

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

Answer 6

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

<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

Answer 7

Solución similar usando el elemento <picture> : 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:

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

Answer 8

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 .