Adaptar imágenes a cualquier resolución con PHP y jQuery

Responsive Img es un recurso de gran valor para aquellos que están desarrollando un sitio con PHP y que desean optimizarlo para que se pueda visualizar correctamente en cualquier navegador o dispositivo móvil, independiente de su resolución.

El proyecto esta compuesto por un plugin jQuery para la manipulación de imágenes de forma dinámica, detectando los posibles cambios de resolución y gestionando el uso de etiquetas. Y por otro lado utiliza en un archivo PHP que se encarga de todo lo relacionado con el procesado de la imagen, creando nuevas imágenes al vuelo en caso de ser necesarias.

adaptar dimensiones de las imágenes

Las dependencias son muy pocas, simplemente debemos tener instalado PHP en nuestro servidor, el framework jQuery anexado a nuestro proyecto y una carpeta con permisos de escritura para guardar las imágenes generadas.

Ejemplo de uso:

JavaScript:

$("#img1").responsiveImg();

HTML:

<div style="width:50%;">
    <img id="img1" src="images/leaf.jpg" style="max-width:100%;" />
</div>

En el sitio del proyecto pueden encontrar algunas formas adicionales de implementar este recurso. Les recomiendo revisar en particular las opciones relacionadas al escalado automático de imágenes según el uso de etiquetas, esta opción nos permite fijar mínimos y máximos al escalar, algo ideal para evitar “romper” diseños 😛

Web: Responsive Img

Categorizado en: