Comment redimensionner les images proportionnellement avec jQuery ?

Préserver les proportions des images avec jQuery

Redimensionner les images proportionnellement est crucial pour maintenir leur intégrité visuelle. jQuery offre une solution simple pour redimensionner les images tout en préservant leurs proportions.

Comment calculer les dimensions proportionnelles

La fonction suivante détermine la largeur et la hauteur appropriées pour l'image redimensionnée :

<code class="js">function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

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

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }</code>

Cette fonction accepte les dimensions de l'image d'origine (srcWidth, srcHeight) et la largeur et la hauteur maximales disponibles (maxWidth, maxHeight) comme paramètres. Il calcule le rapport minimum entre les dimensions d'origine et maximales pour préserver le rapport hauteur/largeur. Les nouvelles largeur et hauteur sont ensuite déterminées en multipliant les valeurs d'origine par ce rapport.

Application de la logique avec jQuery

Une fois que vous avez calculé les nouvelles dimensions, vous pouvez utilisez jQuery pour redimensionner l'image :

<code class="js">var newDimensions = calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight);

$("img").width(newDimensions.width);
$("img").height(newDimensions.height);</code>

Ce code définit dynamiquement les attributs de largeur et de hauteur de l'élément d'image sélectionné sur les valeurs calculées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!