soy Kseso y esto EsCSS

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.

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