20-Elementos de imagenes en html




Elementos de imagen en HTML

Para mostrar diferentes imágenes en dispositivos como tablets, móviles, etc.

Usamos el elemento picture.

El elemento <picture> da a los desarrolladores más flexibilidad a la hora de incrustar las imágenes.

El elemento <picture> puede contener uno o más elementos <source>.

Cada elemento <source> a través de su srcset puede hacer referencia a los diferentes tamaños de imágenes.

De esta forma el navegador puede elegir la imagen que mejor se adapte a su dispositivo.

Ejemplo

Descripción de la imagen

Código del ejemplo

                                
  <picture>
  <source media="(min-width: 1200px)"
  srcset="https://cdn.pixabay.com/photo/2023/09/22/04/50/generated-8268031_1280.png">
  <source media="(min-width: 800px)"
  srcset="https://cdn.pixabay.com/photo/2024/06/21/10/51/ai-generated-8844132_1280.png">
  <img src="https://cdn.pixabay.com/photo/2024/06/14/21/19/summer-8830636_1280.jpg" style="height:600px">
  </picture>  
                                    


> ...

Publicar un comentario

0 Comentarios