Unidad 5. Imágenes (VIII)

5.10. Etiqueta <picture>. Orientación

 

Una variante de lo que estamos viendo es utilizar la orientación del dispositivo como condición para mostrar una imagen u otra. Por ejemplo de esta forma:

<source media="(orientation: portrait)" srcset="graficos/en_rio_mediana_300_portrait.jpg">

Si la orientación es vertical (portrait) se cumplirá la condición y se mostrará la imagen indicada en srcset.

La orientación puede ser horizontal (landscape) si la anchura de la ventana es mayor que la altura, o vertical en otro caso.

Las Media Queries permiten especificar condiciones compuestas, es decir varias preguntas en una condición, por ejemplo, podemos preguntar si la ventana tiene orientación vertical y además el ancho es como máximo de 300 px., como vemos en la primera etiqueta source de este ejemplo.

<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>

En este enlace puedes ver el resultado: Etiqueta picture con diferentes orientaciones .

Con este tipo de condiciones compuestas podemos diseñar la página con imágenes distintas según el tamaño de la ventana pero teniendo también en cuenta la orientación. Muchas imágenes captadas para verse en horizontal quedan mal o muy pequeñas al verlas en vertical, ahora podemos recortarlas y crear una versión que quede bien para la orientación vertical. Esto es especialmente importante pensando en smartphones donde es frecuente girar el dispositivo.