La práctica de implementar imágenes de respuesta aún está en su infancia. Hemos visto muchas ideas y sugerencias sobre cómo se debe hacer y estamos obligados a ver muchas más.
Hoy vamos a ver un pequeño y fascinante marco que le permite no solo redimensionar automáticamente sus imágenes cuando cambia la ventana, sino también recortar las imágenes teniendo en cuenta un importante punto focal específico. Sorprendentemente, hace todo esto con CSS puro. Sigue leyendo para ver cómo funciona.
Conoce el Punto Focal
Focal Point es un proyecto de GitHub y un marco CSS creado por Adam Bradley. Como usted sabe, el concepto de imágenes sensibles requiere que cualquier imagen en su página cambie de tamaño y vuelva a generar para lograr un diseño óptimo para el tamaño actual de la ventana gráfica. Sin embargo, Focal Point lleva esta idea un paso más allá y no solo cambia el tamaño de sus imágenes, sino que también las recorta.
El problema con esta idea, por supuesto, es que si recorta arbitrariamente una imagen, ¡podría estar recortando la parte más importante de la imagen! Por ejemplo, en la imagen de arriba, el sujeto está en el lado derecho de la imagen. ¿Cómo evitamos que sea recortada?
Afortunadamente, el Punto Focal le permite especificar un área objetivo de la imagen para retener (el punto focal). De esta manera, cuando el marco recorte su imagen, lo hará de tal manera que se asegure de que su imagen se vea bien.
¿Como funciona?
Implementar Focal Point es un proceso bastante único, pero es bastante fácil. Primero, hablaremos sobre el proceso general que se usa para elegir un punto focal, luego analizaremos el código.
Cuando inserta una imagen en su página web utilizando Focal Point, esa imagen se dividirá automáticamente en una cuadrícula invisible de 12? 12. No importa cuáles sean las dimensiones de las imágenes, la cuadrícula se adaptará a lo que necesite.
Ahora que sabemos cómo se divide la imagen, debemos decidir sobre un lugar específico en esa cuadrícula que servirá como nuestro punto focal. Lo que esto significa es que, a medida que se recorta la imagen, el punto que elegimos servirá como área central alrededor de la cual se realizará el recorte. Entonces, si elegimos la cara del hombre, podemos asegurarnos de que se mantengan los aspectos importantes de esta foto.
El proceso aquí es encontrar la cara, luego contar las unidades de cuadrícula desde el centro. En este caso, su cara está a tres unidades a la derecha y tres unidades arriba del centro de la cuadrícula.
El código
Ahora que tenemos nuestro punto focal en mente, es hora de planificar nuestro código. Para comenzar, asegúrese de descargar el proyecto de GitHub y vincular el archivo CSS incluido a su documento HTML.
Una vez que esté todo configurado, es hora de configurar dos divs y una etiqueta de imagen. Sí, lo sé, es un montón de marcado para una sola imagen y definitivamente un gran inconveniente para usar este marco. Aquí está el marcado básico:
Bastante simple, ¿verdad? Ahora agreguemos un encabezado y un párrafo solo para un contenido de página genérico.
A continuación, arroje la imagen tal como lo hicimos anteriormente con el "derecho-3". y? up-3? Clases y dos divs.
Verlo en acción
Ahora que nuestra demo está construida, echemos un vistazo. Si echamos un vistazo a la página en una computadora de escritorio o portátil, vemos que las imágenes se ajustan automáticamente a nuestro tamaño de columna y muestran el área completa de la imagen.
Manifestación: Haga clic aquí para lanzar.
Ahora, si reducimos el tamaño de la ventana o cambiamos a un dispositivo móvil, podemos ver que las imágenes se adaptan perfectamente. A medida que nos hacemos cada vez más pequeños, aparece una consulta de medios y, de repente, las imágenes no solo son más pequeñas sino que también se recortan.
Desde la perspectiva del diseño, ¿qué tan genial es eso? Cuanto más pequeña se vuelve una imagen, más fácil es para lo que una vez fue un punto focal grande y prominente convertirse en una pequeña mancha. Con este marco, puede asegurarse de que los espectadores en dispositivos pequeños sigan recibiendo imágenes de alto impacto.
Compatibilidad del navegador
Esto debería funcionar bien en todos los principales y modernos navegadores. Para IE8, las imágenes se redimensionarán correctamente, simplemente no se recortarán. ¡Este realmente no es el fin del mundo ya que el 99.99% de los sitios en la web no tienen esta funcionalidad de recorte automático de todos modos!
Genial, pero ¿cómo funciona?
Ahora sabemos que el punto focal funciona, pero es importante saberlo. cómo funciona.De esta manera, si desea modificar lo que está sucediendo o hacer algo similar sin el marco, podrá hacerlo sin problemas.
La primera parte del código es una solución de imagen receptiva básica solo para CSS. Sería bueno respaldar esto con algún JavaScript, pero es un comienzo sólido. Como puede ver, aprovecha el 100% de ancho, el 100% de ancho máximo y la altura automática para trabajar su magia.
Lo que sucede a continuación es un poco más complicado. Primero, se implementa una consulta de medios básica en 767px. Luego, para hacer que el cultivo se realice, se utilizan algunos márgenes negativos para cada una de las clases posibles. He limpiado este código para incluir solo el? Up-3? y? right-3? Clases que utilizamos anteriormente.
Como puedes ver, realmente no hay mucho código en el trabajo aquí, pero es un trozo bastante complicado de CSS. Se utilizan márgenes negativos con unidades em para recortar la imagen en relación con un punto específico. ¡Felicitaciones serias a Adam Bradley por pensar en esta técnica inteligente!
¿Qué piensas?
Ahora que has visto lo que hace Focal Point y cómo funciona, es hora de que hagas sonar tu turno y me dejes saber lo que piensas. ¿Usarías esto en un proyecto? ¿Por qué o por qué no? ¿Cómo lo harías aún mejor?
Además, si has visto alguna otra herramienta, técnica o marco de gran capacidad de respuesta, deja un enlace y lo comprobaré.