Cómo cambiar el tamaño de las imágenes proporcionalmente

Cambiar el tamaño de las imágenes proporcionalmente es una tarea común que se puede utilizar para ajustar imágenes a dimensiones específicas manteniendo su aspecto relación. Esto es especialmente útil cuando se trabaja con imágenes de diferentes tamaños que deben mostrarse de manera consistente.

Para cambiar el tamaño de una imagen proporcionalmente usando jQuery, puede usar el siguiente código:

$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});

Este código establece el ancho y alto máximos de la imagen en 100%, lo que permite que la imagen se escale proporcionalmente para ajustarse a estas dimensiones. Las propiedades 'ancho' y 'alto' están configuradas en 'automático' para mantener la relación de aspecto original.

Otro método para calcular las dimensiones apropiadas para una imagen preservando su relación de aspecto es usar calcularAspectRatioFit() función:

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}

Esta función toma el ancho y alto originales de la imagen, junto con el ancho y alto máximos disponibles, y calcula el nuevo ancho y alto que mantiene la relación de aspecto dentro de los límites especificados.