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





Si no se cumple ninguna condición
aulaClic. El Tag PICTURE con diferentes anchuras y escenas distintas

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_zomm_600.jpg">
<source media="(max-width: 600px)" srcset="graficos/en_rio_zomm_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.