Ajustar imágenes en contenedores HTML y etiquetas IMG

Demo Descarga : imgLiQuid

Ajustar imágenes en contenedores HTML y etiquetas IMG es una tarea complicada por lo que cada que vez que mostramos imágenes terminamos por estirar dichas imágenes.

imgLiquid es un plugin que adapta las imágenes grandes, pequeñas, medianas al contenedor HTML que prefieras con el objetivo de no perder parte del diseño y salirse de lo “estético”, el inconveniente de este plugin es que para ver sus efectos tendrás que usar  dicho contenedor HTML de forma obligatoria.

 

Imagínate tener una imagen horizontal demasiado larga para mostrar en un div de 150×200  pixeles, tendrías como resultado el estiramiento de la imagen perdiendo el diseño adecuado, te presento el ejemplo en un antes y después de el plugin (las 2 primeras imágenes son sin usar el plugin y las otras 2 siguientes imágenes son al usar el plugin).

Demostración en github: https://oscaruhp.github.io/imgLiQuid-resize/

Para implementar el plugin lo puedes hacer de la siguiente forma:

1.- Incluye a jQuery y el archivo Javascript del plugin:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src ="../js/imgLiquid-min.js" type="text/javascript"></script>

2.- Agrega un contenedor para re-dimensionar la imagen, trata de conservar la estructura.

<div class="adaptar" style="width:150px; height:200px;">
 <img alt="Imagen" src="Imagen.jpg" />
</div>

3.- Crea el script de referencia y hacer que las imágenes se adapten al contenedor, es muy importante aclarar que tienes que usar la clase “adaptar” para hacer que el plugin funcione .

$(document).ready(function() {
 $(".adaptar").imgLiquid();
});

Prueba este plugin y nos comentas si te pareció fácil.

Contenido relacionado: