Comment redimensionner des images proportionnellement avec jQuery : conserver les proportions ?

Redimensionner les images proportionnellement avec jQuery : préserver les proportions

Les capacités de redimensionnement de jQuery sont utiles lorsqu'il s'agit de grandes images. Pour conserver les proportions de l'image lors de la mise à l'échelle, utilisez l'approche suivante :

Logique :

La fonction calculateAspectRatioFit utilisée ici calcule de nouvelles dimensions pour l'image en fonction de la largeur maximale souhaitée et hauteur, en conservant efficacement le rapport hauteur/largeur d'origine.

Mise en œuvre :

<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>

Exemple d'utilisation :

<code class="js">// Calculate and apply new dimensions to the image
var newDimensions = calculateAspectRatioFit(originalWidth, originalHeight, maxWidth, maxHeight);
$(imageSelector).width(newDimensions.width).height(newDimensions.height);</code>

En utilisant cette méthode, les images peuvent être mises à l'échelle proportionnellement tout en conservant leur forme et leurs proportions d'origine.

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!