Unidad 5. Básico: Diferentes orientación y anchura con etiqueta picture

Redimensionar la pantalla del navegador para ver las diferentes versiones de la imagen según la orientación o proporción entre la anchura y altura de la pantalla del navegador.

El navegador muestra la primera imagen que cumpla las condiciones impuestas. En este caso que la orientación sea vertical y la anchura como máximo sea de 300 px., a continuación que la orientación sea vertical. Y a continuación 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="(orientation: portrait) and (max-width: 300px)" srcset="graficos/en_rio_pequenya_200_portrait.jpg">
	<source media="(orientation: portrait)" srcset="graficos/en_rio_mediana_300_portrait.jpg">
	<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>