Comment conserver les proportions de l'image lors du redimensionnement avec jQuery ?

Contraindre le rapport hauteur/largeur de l'image lors du redimensionnement avec jQuery

Lorsque nous travaillons avec de grandes images, nous devons souvent les réduire pour les adapter à des dimensions spécifiques. Le maintien des proportions d'origine est crucial pour préserver l'intégrité de l'image.

Fonction JQuery pour le redimensionnement proportionnel :

Pour contraindre les proportions de l'image lors du redimensionnement à l'aide de jQuery, considérez la fonction suivante :

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

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

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

Utilisation :

Pour utiliser cette fonction, transmettez les dimensions originales de l'image et les dimensions maximales souhaitées :

<code class="javascript">var newDimensions = calculateAspectRatioFit(originalWidth, originalHeight, maxWidth, maxHeight);</code>

Avantages :

L'utilisation de cette fonction garantit que les images sont mises à l'échelle proportionnellement, préservant leur rapport hauteur/largeur même lorsqu'elles sont limitées à une zone spécifique. C'est un outil précieux pour maintenir l'intégrité visuelle des images dans le développement Web.

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!