Adaptar imagen a un div con jQuery

Adaptar imagen a un div con jQuery

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

Página de descarga del plugin imgLiquid de jQuery
Página de descarga

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

Descomprimir fichero del plugin imgLiquid de jQuery
Descomprimir fichero

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

Incluir enlace del plugin imgLiquid en el header
Enlace plugin

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

Incluir código jQuery par iniciar el plugin imgLiquid
Incluir código

Resultado

Imagen original

Ejemplo imagen original
Imagen original

Imagen dentro del div

Ejemplo imagen adaptada a un div con imgLiquid
Ejemplo imagen adaptada

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

Ejemplo imagen adaptada a un div con imgLiquid 2
Ejemplo imagen adaptada 2

Si te ha gustado no olvides compartir en redes sociales.

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

Dejar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas