Adaptar imagen a un div con jQuery

En este tutorial aprenderemos cómo utilizar el plugin de jQuery imgLiquid para adaptar una imagen al tamaño de un div.

Lo primero que debemos hacer es descargar el plugin de la página de jQuery

Descargar plugin

Hacemos click en «Download now» para descargar la última versión del plugin

Una vez que hemos descargado el fichero, lo descomprimimos y copiamos la carpeta «js» a nuestro proyecto

Si no tienes todavía enlazado jQuery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery

Debemos incluir el enlace al plugin en algún lugar de nuestra página, preferiblemente en el header

Código de la imagen

Vamos a añadir un div y una imagen de prueba. Creamos una carpeta llamada «img» en nuestro proyecto y guardamos ahí la imagen

//Creamos un Div de 700x300 pixels y un borde
<div class="divImagen" style="width:700px; height:300px; border:1px solid black;">
  //Dentro ponemos la imagen
  <img alt="prueba imgLiquid" src="img/imagen.jpg"/>
</div>

Para que el plugin funcione y la imagen se adapte automáticamente al tamaño del div nos falta el código jQuery

//Cuando la página esté completamente cargada
$(document).ready(function(){
  //Ejecuta imgLiquid en la clase divImagen
  $(".divImagen").imgLiquid();
});

El código jQuery podemos colocarlo al final del documento

Resultado

Imagen original

Imagen dentro del div

Veamos otro ejemplo con otro tamaño de div

//Creamos un Div de 400x600 pixels y un borde
<div class="divImagen" style="width:400px; height:600px; border:1px solid black;">
  //Dentro ponemos la imagen
  <img alt="prueba imgLiquid" src="img/imagen.jpg"/>
</div>

La imagen sigue adaptándose

Resultado

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo