Imágenes responsivas fáciles con ResponsifyJS
La web moderna debería ser 100% sensible y las bibliotecas más nuevas están haciendo esto cada vez más posible.
Con complementos gratuitos, tales como ResponsifyJS, Es aún más fácil hacer que sus sitios web funcionen en todos los dispositivos. Esta plugin gratis de jQuery lleva un contenedor de imagenes y dinámicamente los reorganiza basado en diferentes tamaños de pantalla.
Desde diferentes contenedores. mantener las imágenes de manera diferente, Pueden redimensionarse de formas muy extrañas. A veces, tendrás fotos de personas y sus caras se pueden cortar cuando se cambia el tamaño en el móvil.
El complemento Responsify fue creado para resolver este problema exacto. Puede funcionar automáticamente pero la verdadera magia está en definiendo su propia área de enfoque en la imagen.
Utiliza un Sistema interno de descripciones decimales. para encontrar donde debe estar el foco de la imagen. Por ejemplo, puedes definir posiciones como data-focus-top cual “bloques en” un cierto segmento de la imagen.
Este dato necesita ser pasado en forma de decimales, por ejemplo, un .5 decimal se dirige al 50% de la imagen (izquierda / derecha o arriba / abajo). Naturalmente, esto es bastante confuso hacer por ti mismo. Pero, hay una aplicación gratuita Responsify eso te permite calcular las posiciones dinámicamente en tu navegador.
Simplemente cargue una imagen, defina el área de enfoque, 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.
Puedes 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, tu querer Imágenes para redimensionar sin áreas de enfoque fijas. Pero, si estas usando Rejillas de mampostería con jQuery. no hace daño agregar ResponsifyJS a tu pila.
Para obtener más información, visite la página de inicio del complemento para obtener una demostración en vivo, un enlace de descarga y una guía de configuración completa.
