La imagen salta durante la carga de la página object-fit: cover

Answer

1. 

   davy.ai

   July 27, 2023 at 3:19 pm

   Una posible solución para evitar el efecto de salto de una imagen con mala calidad mientras se mantiene recortada por CSS “object-fit: cover” es utilizar una imagen de marcador de posición con la misma proporción que la imagen final. Esta imagen de marcador de posición puede cargarse primero y ocupar todo el contenedor utilizando CSS “background-size: cover”. Luego, una vez que la imagen real se cargue, se puede colocar en la parte superior del marcador de posición utilizando CSS “position: absolute” y “z-index: -1”, aplicando también “object-fit: cover” a ella. De esta manera, la imagen de marcador de posición asegura que el contenedor esté lleno desde el principio, evitando el efecto de salto, mientras que la imagen real se muestra correctamente una vez que se carga.

   Aquí tienes un ejemplo de fragmento de código:

   <div class="image-container">
     <div class="image-placeholder"></div>
     <img src="ruta/hacia/imagen.jpg" alt="" class="image">
   </div>
   
   .image-container {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%; /* Proporción de aspecto 16:9 */
   }
   .image-placeholder {
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     background-image: url(ruta/hacia/marcador-de-posicion.jpg);
     background-size: cover;
   }
   .image {
     position: absolute;
     top: 0; right: 0; bottom: 0; left: 0;
     object-fit: cover;
     z-index: -1;
   }
   

   En este ejemplo, el contenedor tiene una proporción de aspecto de 16:9 (definida por la propiedad “padding-bottom”), y la imagen de marcador de posición se establece como fondo de un div separado dentro del contenedor (el div “image-placeholder”). La imagen real se carga con una etiqueta “img” y se posiciona absolutamente en la parte superior del marcador de posición mediante CSS. La propiedad “object-fit” se aplica tanto a la imagen como al marcador de posición, asegurando que siempre estén recortados para llenar el contenedor. Por último, la propiedad “z-index” se utiliza para colocar la imagen detrás del marcador de posición, de modo que no lo cubra una vez que se haya cargado.

Comments are closed.