soy Kseso y esto EsCSS

Panoramic Fashion: Visor Css de imagen panorámica v.2

Una realización para poder incluir en cualquier página una gran imagen y poder visionarla sin que destroce la estructura de la página y ofrecerla con un tamaño tal que no se pierdan los detalles.

Panoramic Fashion: Visor Css de imagen panorámica v.2

·Por Kseso ✎ 4
visor panorámico Css
Panoramic Fashion: visor Css

El anterior visor de imágenes panorámicas adolecía de un fallo conceptual, no menos importante que otros cuantos más: las imágenes van colocadas vía Css. Práctica nada aconsejable si las pics son elementos relevantes, no mera compañía ornamental. Vamos, que si son parte del contenido y añaden información deben ser parte del Html.

Así que para corregir esa y otras carencias y ganarme el perdón, aquí el cuarto visor de imágenes de la serie. Prometo que será el último. De momento y por ahora.

Premisas, Propuestas y Respuestas

Una realización para poder incluir en cualquier página web, sea cual sea su diseño, una gran imagen y poder visionarla sin que destroce la estructura de la página y ofrecerla con un tamaño tal que no se pierdan los detalles y:

Html semántico, sencillo y seriado

El marcado debe ser lo más semántico posible, tan limpio que su uso en casos reales sea no sólo posible sino fácil y sencillo y además poder ser utilizado "de serie" las veces que haga falta.

Esta parte no tiene más allá. Si se trata de una imagen y una información sobre la misma ahí está el elemento figure y su asociado figcaption:

<figure class='visor'> <img src='ruta/archivo.ext' alt='alt' /> <figcaption> <h2>Título/h2> <p>Alguna info relevante sobre la imagen</p> </figcaption> </figure>

Nota al margen: recuerda que el elemento figure puede contener otros más que imágenes. Un vídeo, code, una cita o incluso un poema pueden meterse en él.

Y lo mismo para su leyenda o figcaption (optativa y no obligada).

Juegando con Css

Esta era la parte más difícil y aburrida. Ahora vamos con lo divertido. Lo primero es hacer que la composición se comporte como deseamos:

  • Que no desarme la página y se adapte a su contenedor en cualquier circunstancia.
  • Que contenga sin ser desbordado.
  • Que permanezca dentro del flujo del documento

El visor o elemento figure

.visor { width: 45rem; max-width: 95%; margin: 1rem auto 0; overflow: hidden; position: relative; border: 5px solid #E5F04C; border-radius: 3px; }

La anchura declarada de 45rem debe sopesarse y variarse en función del "tamaño medio" de las imágenes panorámicas a mostrar y su relación ancho/alto. Y si éstas son más altas que largas habría que actuar en el css sobre las alturas de él y la imagen en vez de las anchuras.

La imagen

.visor img { display: block; position: relative; width: 300%; transition: 5s linear; }

Al estar como relative la mantenemos dentro del fluir del documento y es la que da la altura a su padre.

Si estimamos que el tamaño típico y usual de 1rem suele estar entre los 16 y 18px tendremos una imagen entre los 2160 y 2430px. Valores normales para imágenes panorámicas.

Las alturas son de lo más dispares, así que estos valores de 45rem y 300% habría que revisarlos para mantener cierta armonía entre la anchura y altura del elemento figure.

Y por último verás que ya está declarada una transición lo suficientemente amplia en el tiempo como para que se puedan ver los detalles de la imagen al desplazarse.

Mostrando la imagen

Es el momento de actuar para que bajo demanda del usuario la imagen se mueva para poder ser visualizada.

.visor:hover img, .visor:focus img { -webkit-transform: translateX(-66.6%); }

Eso es todo lo que se necesita. Símplemente trasladamos la imagen hacia la izquierda. El valor de 66% en negativo es evidente y lógico:

  1. En Css los valores de desplazamiento positivos son en el sentido horario: eje 'X' hacia la derecha, eje 'Y' hacia abajo. Y los negativos al contrario: eje 'X' hacia la izquierda y el 'Y' hacia arriba.
  2. 66.6%: Queremos que el borde derecho de la imagen llegue hasta el borde derecho de su caja padre sin dejar al descubierto el fondo de él. La imagen son tres veces (300%) la anchura de aquel. Así que quedan 2/3 ocultos y esto es lo que hay que moverla.

La leyenda o figcaption

Ahora sí que necesitamos que ésta parte no influya en las medidas de su padre descomponiendo y dejando al aire parte el fondo. Así que lo posicionamos de forma absoluta y lo centramos por aquello de la armonía:

figcaption { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; }

Y a continuación añade aquellas declaraciones para los elementos que incluyas en él. Tales como encabezados, enlaces... etc,

¡Hey! Accesibilidad, por favor

No me olvido que estoy presentando un elemento en su mayor parte oculto. Nada menos que 2/3 de él. Así que hay que indicarle al usuario que ahí hay más de lo que ve.

Para esta demo opté por el típico símbolo del play utilizado en cualquier vídeo: el triángulo en su círculo semitransparente. Creo que es lo suficientemente explícito.

Todo junto y en funcionamiento

Y llegó la hora de ver cómo se comporta todo lo anterior junto y en funcionamiento. Sin más aquí lo tienes.

Check out this Pen!

Si por alguna razón no lo ves o prefieres verlo en grande, aquí el acceso al pen directo y a toda pantalla:

La demo en Codepen

La serie completa de los visores Css

Por si te perdiste alguno, esta es la serie de los visores de imágenes en puro Css:

  1. Visor múltiples imágenes panorámicas
  2. Splash: Slider manual
  3. Slider automático pantalla completa

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso