Comment redimensionner les images proportionnellement

Le redimensionnement proportionnel des images est une tâche courante qui peut être utilisée pour ajuster les images dans des dimensions spécifiques tout en conservant leur aspect. rapport. Ceci est particulièrement utile lorsque vous travaillez avec des images de différentes tailles qui doivent être affichées de manière cohérente.

Pour redimensionner une image proportionnellement à l'aide de jQuery, vous pouvez utiliser le code suivant :

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

Ce code définit la largeur et la hauteur maximales de l'image à 100 %, ce qui permet à l'image d'être mise à l'échelle proportionnellement pour s'adapter à ces dimensions. Les propriétés « largeur » et « hauteur » sont définies sur « auto » pour conserver le rapport hauteur/largeur d'origine.

Une autre méthode pour calculer les dimensions appropriées d'une image tout en préservant son rapport hauteur/largeur consiste à utiliser calculateAspectRatioFit(). function:

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

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

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

Cette fonction prend la largeur et la hauteur d'origine de l'image, ainsi que la largeur et la hauteur maximales disponibles, et calcule la nouvelle largeur et la hauteur qui maintiennent le rapport hauteur/largeur dans les limites spécifiées.