Como redimensionar imagens proporcionalmente

Redimensionar imagens proporcionalmente é uma tarefa comum que pode ser usada para ajustar imagens em dimensões específicas, mantendo seu aspecto razão. Isso é especialmente útil ao trabalhar com imagens de tamanhos diferentes que precisam ser exibidas de forma consistente.

Para redimensionar uma imagem proporcionalmente usando jQuery, você pode usar o seguinte código:

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

Este código define a largura e altura máximas da imagem como 100%, o que permite que a imagem seja dimensionada proporcionalmente para caber nessas dimensões. As propriedades 'width' e 'height' são definidas como 'auto' para manter a proporção original.

Outro método para calcular as dimensões apropriadas para uma imagem preservando sua proporção é usar o calcAspectRatioFit() função:

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

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

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

Esta função pega a largura e altura originais da imagem, juntamente com a largura e altura máximas disponíveis, e calcula a nova largura e altura que mantêm a proporção dentro dos limites especificados.