Las imágenes receptivas se hicieron más fáciles con ResponsifyJS

La web moderna debe ser 100% sensible y las bibliotecas más nuevas lo hacen cada vez más posible.

Con complementos gratuitos, como ResponsifyJS, es aún más fácil hacer que sus sitios web funcionen en todos los dispositivos. Este complemento jQuery gratuito toma un contenedor de imágenes y las reorganiza dinámicamente en función de los diferentes tamaños de pantalla.

Como los diferentes contenedores mantienen las imágenes de manera diferente, pueden cambiar el tamaño de formas muy extrañas. A veces, tendrás fotos de personas y sus rostros pueden cortarse cuando cambian de tamaño en el móvil.

El plugin Responsify fue creado para resolver este problema exacto. Puede funcionar automáticamente, pero la verdadera magia reside en definir su propia área de enfoque en la imagen.

Utiliza un sistema interno de descripciones decimales para encontrar dónde debe estar el foco de la imagen. Por ejemplo, puede definir posiciones tales como data-focus-top que "bloquea" un cierto segmento de la imagen.

Esta información debe transmitirse en forma de decimales, por ejemplo, un objetivo decimal de .5 el 50% de la imagen (izquierda / derecha o superior / inferior). Naturalmente, esto es bastante confuso de hacer por ti mismo. Pero, hay una aplicación gratuita de Responsify que le permite calcular las posiciones dinámicamente en su navegador.

Simplemente cargue una imagen, defina el área de enfoque y luego copie / pegue el código de la imagen en su sitio web. El complemento Responsify tendrá todos los datos que necesita para redimensionar correctamente la imagen en pantallas más pequeñas.

Puede encontrar bastantes enlaces de demostración en vivo en el repositorio de GitHub, incluidos los fragmentos de código para copiar / pegar en su sitio.

Este complemento no es la solución perfecta para cada proyecto. A veces, querrás que las imágenes cambien de tamaño sin áreas de enfoque fijo. Pero, si está utilizando mallas con jQuery, no hace daño agregar ResponsifyJS a su pila.

Para obtener más información, visite la página principal de complementos para obtener una demostración en vivo, un enlace de descarga y una guía de configuración completa.