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





Si no se cumple ninguna condición
aulaClic. El Tag PICTURE. Orientación y anchura

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>
 
Enero-2019 (V 2.0)
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.