Unidad 5. Básico: Diferentes anchos y misma escena con etiqueta picture

Redimensionar la pantalla del navegador para ver las diferentes versiones de la imagen según el ancho de la pantalla del navegador.

El navegador muestra la primera imagen que cumpla las condiciones impuestas. En este caso que la anchura sea como mínimo 800 px., o sea como mínimo 600 px., o sea como máximo 600 px.

Si el navegador no soporta el tag <picture> o ninguna imagen cumple las condiciones se mostrará la especificada en el tag <img>

Este es el código:

    
<picture>

  <source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">

  <source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">

  <source media="(max-width: 600px)" srcset="graficos/en_rio_pequenya_300.jpg">
    
 <img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">

      </picture>
    
  

 Cursos Informática Gratuitos