PIXEL FACEBOOK

ResponsifyJS, Librería De jQuery Para Imágenes Responsive

ResponsifyJS, Librería De jQuery Para Imágenes Responsive

Tener un sitio web 100% responsive es los primordial en la actualidad,  y las nuevas librerías están haciendo esto cada vez más posible con una increíble facilidad. Con complementos gratuitos, como ResponsifyJS, es aún más fácil conseguir que un sitio web funcione en todos los dispositivos. Este plugin jQuery libre toma un contenedor de imágenes y las reorganiza dinámicamente en función de tamaños de diferentes pantallas.

Dado que los contenedores son distintos y estos contienen imágenes de diferentes tamaños, pueden cambiar su forma de maneras muy extrañas. A veces, tendrás fotos de personas y sus rostros pueden ser cortados cuando se cambia el tamaño en el móvil.

El complemento Responsify se creó para resolver este problema en concreto. Puede funcionar automáticamente, pero la verdadera magia radica en definir su propia área de enfoque de la imagen.

Utiliza un sistema interno de descripciones en decimales para encontrar dónde debe estar el foco de la imagen. Por ejemplo, puede definir posiciones como data-focus-top, donde top podria ser otro segmento de la imagen.

Estos datos deben ser pasados en forma de decimales, por ejemplo un .5 decimal apunta al 50% de la imagen (izquierda / derecha o superior / inferior). Naturalmente, esto es bastante confuso mientras se conoce como funciona correctamente este complemento. Sin embargo, hay una aplicación gratuita de Responsify que te permite calcular las posiciones dinámicamente en tu navegador.

COMO HACER UNA IMAGEN RESPONSIVE

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.

Como hacer imágenes responsive con Responsify ?

+ Ver Código del ejemplo...

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 o proyecto web.

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 en el stack.

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.

Artículos Relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Jenny Watson

Hi! beautiful people. I`m an authtor of this blog. Read our post – stay with us

Categorías

Artículos Relacionados

¡Descubre Hostinger, Crea tu Web y Empieza a Generar Presencia Online!

¿Buscas un hosting confiable y asequible para tu proyecto web? Hostinger te ofrece planes flexibles y potentes que se adaptan a tus necesidades. Desde sitios web personales hasta tiendas online, su tecnología de vanguardia garantiza un rendimiento excepcional.