Focal Point: Recorte inteligente de imágenes en el RWD

Técnica puro Css para mostrar las imágenes en función de su punto principal en el RWD.

Focal Point: Recorte inteligente de imágenes en el RWD

Por Kseso ✎ 2

Al trabajar con imágenes en páginas de las llamadas "responsive" o RWD se suele optar por un redimensionado o recorte de las mismas en dispositivos con pantallas pequeñas.
Pero por lo general, esto da como resultado imágenes demasiado pequeñas en las que no se aprecia bien el detalle principal de las mismas y si se recortan puede que lo mostrado sea una parte de la imagen que no dice nada.

Así que lo ideal sería poder marcar un punto principal o foco en la imagen y que las modificaciones se hagan en base a él.

Esto es lo que se consigue con la técnica "Focal Point". Y aquí es donde surge la pregunta:

Qué es el "Focal Point"

"Focal Point" es un proyecto GitHub creado por Adam Bradley.
Es un conjunto de clases Css que, en el RWD aplicado a imágenes, ayudan a mantener el foco en la parte principal de la imagen al modificarla para adaptarla a cualquier tamaño de pantalla.
Con independencia de que ese punto se encuentre en el centro de la imagen o en cualquier otra parte de ella.

Cómo funciona el Focal Point

Las imágenes son "colocadas" en una rejilla o cuadrícula de 12x12. No importa el tamaño de las imágenes. La cuadrícula se escala a ella.

Ahora que ya tenemos nuestra cuadrícula es muy fácil saber dónde está el punto caliente de la imagen. Y por lo tanto apuntar a él como en el juego de los barcos: en nuestro ejemplo se encuentra a tres unidades a la derecha y a otras tres arriba del centro de la rejilla

Los códigos

Ya está logrado lo más difícil. Poder referenciar el punto focal de la imagen.
A continuación, teniendo enlazado el css del proyecto proyecto GitHub, primero tenemos que etiquetar en el html nuestra imagen de la siguiente manera:

<div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div>

Fíjate que se necesitan dos div´s. El exterior con la clase .focal-point y el interior sin ninguna clase.

En este punto es donde interviene el punto focal que hemos ubicado antes. Como se encontraba tres unidades arriba y tres a la derecha se declaran esas dos mismas clases en el div primero, quedando así el marcado:

<div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt="guy"></div> </div>

Y si abres la hoja de estilos del proyecto "Focal Point" verás que a los tres elementos (2 div´s y la imagen) se le aplica lo siquiente:

.focal-point { width: 100%; height: auto; overflow: hidden; } .focal-point div { position: relative; max-width: none; height: auto; } .focal-point img { width: 100%; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }

Hasta aquí sencillo y sin ningún misterio. La magia se realiza al redimensionar la ventana (o verse en pantallas pequñas). Para eso utiliza como en el RWD las @media queries. Por ejemplo:

@media all and (max-width: 767px) { /* Pantalla 4x3 Landscape */ .focal-point div { margin: -3em -4em; } .up-3 div { margin-top: -1.5em; margin-bottom: -4.5em; } .right-3 div { margin-left: -6em; margin-right: -2em; } }

Todo se reduce a algo tan sencillo como usar márgenes negativos para posicionar el div interior y padre de la imagen de acuerdo al punto focal determinado en la imagen y que se identifica por cada una de las posibles clases definidas en el css.

Amplía información sobre el Focal Point

Créditos y reconocimientos

Este artículo está realizado en base a la info que proporciona el autor en el proyecto GitHub y en el artículo mencionado de Designshack. De éste último son las dos imágenes que ilustran el artículo.

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

Comentarios: 2

  1. Esto está muy interesante y verdaderamente útil. Lo dejaré como alternativa...
    Sabe don Kseso, que lo que yo siempre he querido, es que distintas imágenes, todas con diferentes proporciones, ocupen el 100% del contenedor, tanto de ancho como de alto, sin distorsionarse, sin cortarse, que sea compatible con todos los navegadores, incluyendo IE7, y lograrlo con CSS. Qué exigente ¿verdad? A ver si no me quedo con las ganas...

    Por favor, si tiene tiempo échele un vistazo a mi comentario en esta entrada:

    http://www.ayuda-bloggers.info/2013/04/blogger-thumbnail-first-url.html#comment-891028250

    El comentario lo hice hoy, mayo 9...Quise vincular el comentario, pero parece que hay un fallo, y no me arroja nada...

    Bueno, ¿Sabe usted de alguna técnica que lo permita?

    Bueno, regreso ;)

    ResponderEliminar
  2. Hola Karla
    No, no se de ninguna técnica.
    Además entiendo que es imposible de cumplir con todas las condiciones que pones (sin entrar en compatibilidad de navegadores).
    Desde el momento en que no coinciden las relaciones de aspecto ni entre las imágenes entre sí ni con los div´s que las contienen alguna de las premisas tendría que obviarse.

    Un saludo.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap