How To: Escalar imágen manteniendo proporciones – JQuery


La mayoría de veces tenemos que poner un listado imágenes de manera estándar pero la peor práctica es volver todas estas imágenes al mismo tamaño una a una en un editor de imágenes, ya que por lo general estas vendrán de algún servicio web o directamente desde los clientes.

Teniendo esta necesidad me puse a la tarea de buscar en Internet y mejoré un código muy bueno que encontré en la siguiente Web: http://ericjuden.com/2009/07/jquery-image-resize/

El método es sencillo de usar.

  1. Debemos cargar o ya tener una imagen cargada en un elemento img
  2. En el evento que deseemos hacer la redimensión enviar por parámetro el selector.
  3. Listo!

La estructura que tengo para la imagen es la siguiente (este es un ejemplo real):

<article id="fachadaUploadImage" class="fileInputCustom">
    <img id="img-1" src="#" alt="FACHADA" />
    <p>FACHADA</p>
</article>

Finalmente quedaría así.

Ahora si, el código:

        function resizeImage(selector) {
            // Remove the previous values
            $(selector).css("width", "");
            $(selector).css("height", "");

            $(selector).each(function () {
                var maxWidth = 473; // Max width for the image
                var maxHeight = 132;    // Max height for the image
                var ratio = 0;  // Used for aspect ratio
                var width = $(this).width();    // Current image width
                var height = $(this).height();  // Current image height

                // Check if current height is larger than max
                if (height > maxHeight) {
                    ratio = maxHeight / height; // get ratio for scaling image
                    $(this).css("height", maxHeight);   // Set new height
                    $(this).css("width", width * ratio);    // Scale width based on ratio
                    width = width * ratio;    // Reset width to match scaled image
                }
                // Check if the current width is larger than the max
                else if (width > maxWidth) {
                    ratio = maxWidth / width;   // get ratio for scaling image
                    $(this).css("width", maxWidth); // Set new width
                    $(this).css("height", height * ratio);  // Scale height based on ratio
                    height = height * ratio;    // Reset height to match scaled image
                    width = width * ratio;    // Reset width to match scaled image
                }
            });

            // setting up the styles
            $(selector).css("margin-left", "auto");
            $(selector).css("margin-right", "auto");
            $(selector).css("display", "block");
            $(selector).parent().css("background-image", "none");
        }